99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

jQuery Mobile 導航欄

2018-02-02 18:07 更新

jQuery Mobile 導航欄

通過導航欄你可以快速到達指定位置,jQuery Mobile將導航欄部分的代碼放在了data-role 為 header 的 div 中。


jQuery Mobile 導航欄

導航欄是由一組水平排列的鏈接組成,通常包含在頭部或尾部內(nèi)。

默認情況下,導航欄中的鏈接將自動變成按鈕(不需要 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>

嘗試一下 ?

lamp 默認情況下,按鈕的寬度與它的內(nèi)容一樣。使用一個無序列表來平均地劃分按鈕的寬度:1 個按鈕占 100% 寬度,2 個按鈕則各占 50% 的寬度,3 個按鈕則每個占 33,3% 的寬度,依此類推。然而,如果您在導航欄中指定了超過 5 個按鈕,將會拆成多行(查看"更多實例")。


激活按鈕

當導航欄中的某個鏈接被點擊,它將獲得被選中(按下)的外觀。

如果想在不點擊鏈接時獲得這種外觀,請使用 class="ui-btn-active":

實例

<li><a href="#anylink" class="ui-btn-active">首頁</a></li>

嘗試一下 ?

對于多個頁面,您可能想要每個按鈕的選中外觀代表當前用戶所在的頁面。要做到這一點,請?zhí)砑?"ui-state-persist" 和 "ui-btn-active" 到鏈接的 class:

實例

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首頁</a></li>

嘗試一下 ?


實例

更多實例

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

尾部中的導航欄
如何在尾部內(nèi)添加導航欄。

導航欄中的定位圖標
如何在尾部內(nèi)的導航欄中定位圖標。

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

關于jQuery Mobile實現(xiàn)導航欄的相關知識就給大家介紹到這里,希望對大家有所幫助!

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號