jQuery Mobile 導航欄

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>

親自試一試

提示:按鈕的寬度,默認地,與其內容一致。使用無序列表來均等地劃分按鈕:一個按鈕占據 100% 的寬度,兩個按鈕各分享 50% 的寬度,三個按鈕 33.3%,以此類推。不過,如果您在導航欄中規定了五個以上的按鈕,那么它會彎折為多行(參加頁面底部的“更多實例”)。

活動按鈕

當導航欄中的鏈接被敲擊時,會獲得選取外觀(按下)。

如需在不敲擊鏈接時實現此外觀,請使用 class="ui-btn-active":

實例

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

親自試一試

對于多個頁面,您也許需要為每個按鈕設置“被選”外觀,以表示用戶正在瀏覽該頁面。如果要這么做,請向鏈接添加 "ui-state-persist" 類,以及 "ui-btn-active" 類:

實例

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

親自試一試

更多實例

內容中的導航欄
如何在 data-role="content" 中添加導航欄。
頁腳中的導航欄
如何在頁腳中添加導航欄。
在導航欄中定位圖標
如何在頁腳內部的導航欄中放置圖標。
五個以上的按鈕
演示在導航欄中的十個按鈕。