jQuery Mobile 導航欄
導航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部內。
默認情況下，導航欄中的鏈接將自動變成按鈕（不需要data-role="button"）。
使用data-role="navbar" 屬性來定義導航欄：
實例
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
嘗試一下»
 | 默認情況下，按鈕的寬度與它的內容一樣。 使用一個無序列表來平均地劃分按鈕的寬度：1 個按鈕佔100% 寬度，2 個按鈕則各佔50% 的寬度，3 個按鈕則每個佔33,3% 的寬度，依此類推。 然而，如果您在導航欄中指定了超過5 個按鈕，將會拆成多行（查看"更多實例"）。 |
|---|
導航按鈕圖標
我們可以使用data-icon 屬性為導航按鈕添加圖標:
data-icon 屬性與在圖標章節中的CSS 類使用相同的值。 CSS類使用方法class="ui-icon- value ", data-icon屬性使用方法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" 到鏈接的class：
更多實例
內容中的導航欄
如何在data-role="content" 內添加導航欄。
尾部中的導航欄
如何在尾部內添加導航欄。
導航欄中的定位圖標
如何在尾部內的導航欄中定位圖標。
超過5個按鈕
導航欄中10 個按鈕的演示。