2

我已经使用 Jquery Mobile 实现了一个面板导航系统。但是，似乎在发生页面转换时，会出现一些图形故障。在我的桌面 chrome 上，我页面上的渐变在过渡期间看起来被挤压了。在我的移动 chrome 浏览器上访问同一页面时，过渡期间页面底部会出现一条白线。

通过我的测试，我发现如果我去掉面板导航，图形故障也会消失。

这是其中一页的示例。其他页面在结构上看起来相同。

<!DOCTYPE html> 
<html>
<head> 
    <title>Vidapp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></sc    ript>

    <link rel="stylesheet" href="resources/custom.css" />
</head>

<body> 
<div data-role="page" data-theme="a">

    <div data-id="header" data-role="header" data-position="fixed" data-tap-toggle="false">
    <a href="#sidemenu" data-icon="bars">Menu</a>
    <h1>Contributions</h1>
    <a href="#" data-icon="home">Gift</a>
</div>

<div id="sidemenu" data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="a">
    <ul data-role="listview">
        <li><a href="/views/browse/trending.html">Trending</a></li>
        <li><a href="/views/browse/friends.html">Friends</a></li>
        <li><a href="/views/browse/contributions.html">Contributions</a></li>
        <li><a href="/views/browse/mygifts.html">My Gifts</a></li>
    </ul>
</div>

<div data-role="content">
    <input type="search" name="search" id="search" data-mini="true" placeholder="Have a Reference Code?" />
    <h2>My Contributions</h2>
</div>

</div>
</body>
</html>

代码托管在这里：错误演示

我无法弄清楚是什么导致了这些图形故障的发生！

4

1 回答 1

1

According to the jQuery Mobile website: http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/panels/

A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version.

Try moving the panel to either before the header, or after the contact divs.

于 2013-03-23T07:51:39.697 回答