jQuery Mobile的導航欄
導航條由一組鏈接，水平對齊，通常在頁眉或頁腳：
酒吧被編碼為一個包裹裡面的鏈接的無序列表<div>有元素data-role="navbar"屬性：
例
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
試一試» 默認情況下，導航條中的鏈接會自動變成一個按鈕（不需要class="ui-btn"或data-role="button" ）。
這些按鈕是默認情況下，盡可能廣泛的內容。 使用一個無序列表平分按鈕：1按鈕將寬度的100％，2個按鈕共享各佔50％，3個按鍵33.3％等。但是，如果你在導航欄指定多於5個按鈕，它會換到多行（見下面“更多示例”）。
在導航按鈕圖標
要將圖標添加到您的導航按鈕，使用數據圖標的屬性：
數據圖標屬性使用相同的值作為“圖標”一章中指定的CSS類。 唯一的區別是，而不是指定class="ui-icon- value " ，指定的屬性data-icon=" value " 。
| 屬性值 | 描述 | 圖標 |
|---|---|---|
| data-icon="home" | 家 | |
| data-icon="arrow-r" | 右箭頭 | |
| data-icon="search" | 搜索 |
對於所有的jQuery Mobile的按鈕圖標的完整參考，請訪問我們的jQuery Mobile的圖標參考 。
定位圖標
就像在"ui-btn-icon- position "類（在“圖標”一章規定的），你可以選擇其中的圖標應該定位導航按鈕： top, right, bottom或left 。
的圖標的位置被設定在導航欄容器上 - 這是不可能的每個單獨的按鈕的鏈接位置。 使用data-iconpos屬性指定的位置：
| 屬性值 | 描述 | 例 |
|---|---|---|
| data-iconpos="top" | 頂部排列圖標 | 嘗試一下 |
| data-iconpos="right" | 右邊的圖標排列 | 嘗試一下 |
| data-iconpos="bottom" | 底部的圖標排列 | 嘗試一下 |
| data-iconpos="left" | 左對齊圖標 | 嘗試一下 |
默認情況下，導航按鈕圖標放在上面的文字(data-iconpos="top")
活動按鈕
當在導航欄的鏈接被竊聽/點擊，它就會選擇（按下）的樣子。
而不必挖掘鏈接，請使用做到這一點看class="ui-btn-active" ：
對於多頁，您可能需要為每個代表頁面的用戶是按鈕，在“選擇”的樣子。 要做到這一點，添加"ui-state-persist"一流你的鏈接，以及在"ui-btn-active"類：
更多示例
內容Navbars
如何添加裡面一個導航欄data-role="content" 。
在頁腳Navbars
如何添加頁腳裡面一個導航欄。
超過5個按鈕
10按鈕導航欄演示