jQuery Mobile 導(dǎo)航欄

導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁眉或頁腳內(nèi)部。

默認(rèn)地，導(dǎo)航欄中的鏈接會(huì)自動(dòng)轉(zhuǎn)換為按鈕（無需 data-role="button"）。

請(qǐng)使用 data-role="navbar" 屬性來定義導(dǎo)航欄：

實(shí)例

<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>

親自試一試

提示：按鈕的寬度，默認(rèn)地，與其內(nèi)容一致。使用無序列表來均等地劃分按鈕：一個(gè)按鈕占據(jù) 100% 的寬度，兩個(gè)按鈕各分享 50% 的寬度，三個(gè)按鈕 33.3%，以此類推。不過，如果您在導(dǎo)航欄中規(guī)定了五個(gè)以上的按鈕，那么它會(huì)彎折為多行（參加頁面底部的“更多實(shí)例”）。

活動(dòng)按鈕

當(dāng)導(dǎo)航欄中的鏈接被敲擊時(shí)，會(huì)獲得選取外觀（按下）。

如需在不敲擊鏈接時(shí)實(shí)現(xiàn)此外觀，請(qǐng)使用 class="ui-btn-active"：

實(shí)例

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

親自試一試

對(duì)于多個(gè)頁面，您也許需要為每個(gè)按鈕設(shè)置“被選”外觀，以表示用戶正在瀏覽該頁面。如果要這么做，請(qǐng)向鏈接添加 "ui-state-persist" 類，以及 "ui-btn-active" 類：

實(shí)例

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

親自試一試