導航欄在jQuery Mobile的

我是新來的jQuery Mobile的，需要一些幫助，在我的應用進一步移動所有頁面remian不斷導航欄在jQuery Mobile的

我用導航條有兩個按鈕查看和兩個按鈕導航罰款和顯示不同的列表意見&當我點擊列表視圖項目該頁面正在導航到另一個HTML頁面並顯示相關數據，但問題是我無法在下一頁中查看導航欄...

我想讓導航欄保持不變適用於所有頁面，如android中的選項卡組活動。請人幫助我很好的例子和應用程序或給我一些很好的聯繫，以實現這一目標？

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

來源

2012-04-12 android phonegap

我已經發布我的HTML code.hope現在u得到一些想法是我的嘗試。 – 2012-04-12 13:50:13

實現這一目標的最好辦法是把你的導航欄一個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-12 15:13:44 codaniel

嗨codaniel謝謝你的迴應，但它不適合我 – 2012-04-13 06:06:16

請給我更多的代碼，然後請。你的列表視圖頁面是什麼樣的？ – codaniel 2012-04-13 06:16:07

嗨，你可以ü請看看這個鏈接中的圖像http://www.pocketmagic.net/wp-content/uploads/2010/01/android_tab_control_2.jpg我想像這樣的東西像image.I得到標籤和不同的列表視圖下每個選項卡。當我從列表中選擇一項，它顯示其他頁面中的細節，但標籤不可見只有數據是可見的，我希望標籤在所有頁面中可見...希望我能夠現在給你一些想法 – 2012-04-13 12:20:12

我從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>

，第二頁：

<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-02 15:12:59 wangeek

導航欄在jQuery Mobile的

回答

相關問題