jQuery Mobile 導航欄

導航欄是由一組水平排列的連結組成，通常包含在頭部或尾部內。

預設情況下，導航欄中的連結將自動變成按鈕（不需要 data-role="button"）。

使用 data-role="navbar" 屬性來定義導航欄：

例項

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="https://www.itread01.com/jquerymobile/#anylink">首頁</a></li>
<li><a href="https://www.itread01.com/jquerymobile/#anylink">頁面二</a></li>
<li><a href="https://www.itread01.com/jquerymobile/#anylink">搜尋</a></li>
</ul>
</div>
</div>

嘗試一下 ?

預設情況下，按鈕的寬度與它的內容一樣。使用一個無序列表來平均地劃分按鈕的寬度：1 個按鈕佔 100% 寬度，2 個按鈕則各佔 50% 的寬度，3 個按鈕則每個佔 33.3% 的寬度，依此類推。然而，如果您在導航欄中指定了超過 5 個按鈕，將會拆成多行（檢視"更多例項"）。

導航按鈕圖示

我們可以使用 data-icon 屬性為導航按鈕新增圖示:

例項

<a href=https://www.itread01.com/jquerymobile/"#anylink" data-icon="search">搜尋</a>

嘗試一下 ?

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" 圖示左側對齊 嘗試一下
Note  預設情況， 導航按鈕的圖示位於文字之上 (data-iconpos="top")。

啟用按鈕

當導航欄中的某個連結被點選，它將獲得被選中（按下）的外觀。

如果想在不點選連結時獲得這種外觀，請使用 class="ui-btn-active"：

例項

<li><a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn-active">首頁</a></li>

嘗試一下 ?

對於多個頁面，您可能想要每個按鈕的選中外觀代表當前使用者所在的頁面。要做到這一點，請新增 "ui-state-persist" 和 "ui-btn-active" 到連結的 class：

例項

<li><a href="https://www.itread01.com/jquerymobile/#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>

嘗試一下 ?

例項

更多例項

內容中的導航欄
如何在 data-role="content" 內新增導航欄。

尾部中的導航欄
如何在尾部內新增導航欄。

導航欄中的定點陣圖標
如何在尾部內的導航欄中定點陣圖標。

超過 5 個按鈕
導航欄中 10 個按鈕的演示。