侧导航的内容错位

时间:2014-12-26 10:17:56

标签: javascript jquery navigation tizen-web-app

我正在开发一个具有侧面导航窗格的应用,其中我遇到了问题内容错位 在某些页面上并非全部

内容滑落

Screenshot when sliding

内容正确

Screenshot which sliding is good

代码 这是导航代码

<label class='side-menu-overlay active' for="sideMenuHandler"></label>
<div class='side-menu'>
    <ul class="sideMenuList" style="-webkit-padding-start: 0px;">
        <li class="menuList" id="about" onclick="loadPage1('About Calendar')"><label class="textStyle"
             for="sideMenuHandler">About Calendar</label></li>
        <!-- <li class="menuList" id="email"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage2('Email us')">Email
                Us!</label></li>
        <li class="menuList" id="share"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage3('Share App')">Share
                the app!</a>
        </label></li>
        <li class="menuList" id="share"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage4('Rate')">Rate the
                app!</a>
        </label>
        </li> -->
        <li class="menuList" id="home" onclick="loadPage5('Calendar')"><label class="textStyle"
            for="sideMenuHandler">Home!</a>
        </label></li>
    </ul>

</div>

主要部分代码

在这个&#34; appcontent&#34;部分被ajax擦除并且放置了aboutus内容

<input type="checkbox" class="side-menu-handler" id="sideMenuHandler">

<div class="main">
    <div class="top-bar">
        <label class="list-btn" id="menuButton" for="sideMenuHandler">
            <div class="menu-icon">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
            <div class="appName">Calendar</div>
        </label>
    </div>
    <div class="appContent">
        <div data-role="content" id="calendarPart">
            <div id="calendar">
                <div data-role="header" data-position="fixed">
                    <!-- <h1>Single-page application</h1> -->
                </div>
                <!-- <p>This is a single page boilerplate template that you can copy
                to build your first Tizen Web UI Framework page.</p> -->
                <iframe style="width:75px;height:43px; border:none;position: absolute;top:85px;right:0;" src="http://dev.skyle.co/zen/a.html"></iframe>
                <div class="tabs">
                    <ul class="tab-links">
                        <li id="2013Year" class="active"><a href="#tab1">2013</a></li>
                        <li id="2014Year"><a href="">2014</a></li>
                        <li id="2015Year"><a href="">2015</a></li>
                        <!-- <li><a href="#tab4">Tab #4</a></li> -->
                    </ul>

                    <div class="tab-content"
                        style="width: 100%; position: absolute; left: 1px; top: 49px; height: 352px;">
                        <div id="tab1" class="tab active" id="lyear">
                            <div class="container">
                                <div class="row">
                                    <div class="g4">
                                        <div id="eventCalendarInline"
                                            style="position: absolute; left: 71px; top: 81px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关于我们页面的代码

<div data-role="content" id="aboutPart">
<div>
    <h2>About:</h2>
    <p
        style="text-align: justify; font-size: medium; font-family: Source Sans Pro; padding-left: 17px; padding-right: 17px;">
        This app informs about the holidays and festivals in India. Festivals
        in India carry important message and plays important role in
        symbolizing the tradition and culture of India. This App provides
        list of major Indian festivals grouped by months. This App includes
        festivals and dates for 2013, 2014,2015 and 2016 (i.e. Previous year,
        Current year and Upcoming two years). Users can plan their holidays
        by using this app.</p>
    <h2>Features:</h2>
    <ul style="font-size: initial; font-family: Source Sans Pro; width: 83%;">
        <li>Monthly calendar view with all Indian festival, dates of
            holidays are highlighted.</li>
        <li>The festivals are in list view on the bottom half of the
            page, upon scrolling calendar goes up and festival list is shown in
            full page.</li>
        <li>Use navigation button to change the month. Traverse between
            months to view festivals.</li>
        <li>Menu is customized so that it can meet user expectations and
            this app is user friendly.</li>
    </ul>
</div>

请给出一些提示来解决这个问题

提前致谢

1 个答案:

答案 0 :(得分:0)

代码中这是导航代码您有两个标记</label></li>缺少起点(就在<li class="menuList" id="home">之前)。 同样在<li class="menuList" id="share">的同一部分中,存在多余的</a>结束标记。

关于我们页面的代码中,您缺少结束</div>标记。

请使用这些修补程序重新检查您的代码,如果这不能解决您的问题,我会尽力帮助您。