2

私はjquerymobileを初めて使用し、アプリケーションをさらに進めるためにいくつかの助けが必要です

2つのボタンビューでNAVBARを使用しましたが、2つのボタンがうまくナビゲートしてさまざまなリストビューを表示しています。リストビューアイテムをクリックすると、ページが別のHTMLページに移動し、関連データが表示されますが、問題はナビゲーションバーを表示できないことです。次のページで...

アンドロイドのタブグループアクティビティのように、すべてのページでナビゲーションバーを一定にしたいと思います。誰かが良い例とアプリケーションで私を助けてくれるか、これを達成するためのいくつかの良いリンクを見せてください...

<body>
<div data-role="page" id="page1">
    <div data-role="content">
        <div data-role="navbar" id="nav1">
            <ul>
                <li><a href="#" data-href="dashboard" class="ui-btn-active" datafld="list">Dashboard</a></li>
                <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
            </ul>
        </div>
        <div class="ui-grid-but" id="list">
            <div class="ui-block-a">
                <a  href="#lv1" data-role="button" id="button1" >
                    <img src="task.png" alt="Tasks" /></a>
            </div>
            <div class="ui-block-b">
                <a  href="#lv2" data-role="button" id="button2">
                    <img src="reminder.png" alt="Reminders" /></a>
            </div>
          </div>
          <div class="def_content_div" id="dashboard">
            <ul data-role="listview" data-inset="true">
                <li><a href="#lv1">List View 1</a> </li>
                <li><a href="#lv2" >List View 2</a> </li>
                <li><a href="#lv3" >List View 3</a> </li>
                <li><a href="#lv4" >List View 4</a> </li>
             </ul>
            </div>
            <div class="content_div" id="deals">
                <ul data-role="listview"data-inset="true">
                    <li> <a href="#lv5">List View 5</a></li>
                    <li> <a href="#lv6">List View 6</a></li>
                    <li><a href="#lv7">List View 7</a></li>
                    <li><a href="#lv8">List View 8</a></li>
                </ul>
             </div>
         </div>
4

2 に答える 2

0

これを実現する最良の方法は、ナビゲーションバーをJQMヘッダー内に配置し、すべてのヘッダーに同じデータIDを使用することです。すなわち

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard" class="ui-btn-active" datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>

上記のコードスニペットをすべてのリストビューページに含める必要があります。これにより、一定の固定ナビゲーションメニューが表示されます。

リクエストされた例を次に示しますhttp://jsfiddle.net/codaniel/z5VYF/1/

于 2012-04-12T15:13:44.110 に答える
0

http://jquerymobile.com/demosから解決策を入手しました

codanielの回答によると、すべてのリストビューページにコードスニペットを含める必要があります。

次に、すべてのページの「現在の」ナビゲーションボタンに次のクラスを追加する必要があります。

class="ui-btn-active ui-state-persist"

最初のフロントページの場合：

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard" class="ui-btn-active ui-state-persist" datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>

そして2ページ目：

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard"  datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" class="ui-btn-active ui-state-persist" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>
于 2012-09-02T15:12:59.020 に答える