jQuery Mobile 導(dǎo)航欄

通過(guò)導(dǎo)航欄你可以快速到達(dá)指定位置，jQuery Mobile將導(dǎo)航欄部分的代碼放在了data-role 為 header 的 div 中。

jQuery Mobile 導(dǎo)航欄

導(dǎo)航欄是由一組水平排列的鏈接組成，通常包含在頭部或尾部?jī)?nèi)。

默認(rèn)情況下，導(dǎo)航欄中的鏈接將自動(dòng)變成按鈕（不需要 data-role="button"）。

使用 data-role="navbar" 屬性來(lái)定義導(dǎo)航欄：

	默認(rèn)情況下，按鈕的寬度與它的內(nèi)容一樣。使用一個(gè)無(wú)序列表來(lái)平均地劃分按鈕的寬度：1 個(gè)按鈕占 100% 寬度，2 個(gè)按鈕則各占 50% 的寬度，3 個(gè)按鈕則每個(gè)占 33,3% 的寬度，依此類推。然而，如果您在導(dǎo)航欄中指定了超過(guò) 5 個(gè)按鈕，將會(huì)拆成多行（查看"更多實(shí)例"）。

激活按鈕

當(dāng)導(dǎo)航欄中的某個(gè)鏈接被點(diǎn)擊，它將獲得被選中（按下）的外觀。

如果想在不點(diǎn)擊鏈接時(shí)獲得這種外觀，請(qǐng)使用 class="ui-btn-active"：

對(duì)于多個(gè)頁(yè)面，您可能想要每個(gè)按鈕的選中外觀代表當(dāng)前用戶所在的頁(yè)面。要做到這一點(diǎn)，請(qǐng)?zhí)砑?"ui-state-persist" 和 "ui-btn-active" 到鏈接的 class：

更多實(shí)例

內(nèi)容中的導(dǎo)航欄
如何在 data-role="content" 內(nèi)添加導(dǎo)航欄。

尾部中的導(dǎo)航欄
如何在尾部?jī)?nèi)添加導(dǎo)航欄。

導(dǎo)航欄中的定位圖標(biāo)
如何在尾部?jī)?nèi)的導(dǎo)航欄中定位圖標(biāo)。

超過(guò) 5 個(gè)按鈕
導(dǎo)航欄中 10 個(gè)按鈕的演示。

關(guān)于jQuery Mobile實(shí)現(xiàn)導(dǎo)航欄的相關(guān)知識(shí)就給大家介紹到這里，希望對(duì)大家有所幫助！