2

Jquery Mobile を使用して、パネル ナビゲーション システムを実装しました。ただし、ページ遷移が発生すると、いくつかのグラフィックの不具合があるようです。私のデスクトップ クロームでは、移行中にページのグラデーションが押しつぶされたように見えます。モバイル Chrome ブラウザーで同じページにアクセスすると、遷移中にページの下部に白い線が表示されます。

私のテストでは、パネル ナビゲーションを削除すると、グラフィカルな不具合も解消されることがわかりました。

以下は、ページの 1 つのサンプルです。他のページは構造的に同じように見えます。

<!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>

コードはここでホストされています: Demo of Error

これらのグラフィックの不具合が発生する原因がわかりません!

4

1 に答える 1

1

jQuery Mobile Web サイトによると: http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/panels/

パネルは、jQuery Mobile ページ内のヘッダー、コンテンツ、およびフッター要素の兄弟である必要があります。パネル マークアップは、これらの要素の前または後に追加できますが、要素の間に追加することはできません。パネルをページの外に配置することはできませんが、この制約は将来のバージョンで削除される予定です。

パネルをヘッダーの前または連絡先の div の後に移動してみてください。

于 2013-03-23T07:51:39.697 に答える