jQuery Mobile 導(dǎo)航欄

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

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

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

實(shí)例

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首頁(yè)</a></li>
      <li><a href="#anylink">頁(yè)面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

親自試一試

提示：按鈕的寬度，默認(rèn)地，與其內(nèi)容一致。使用無(wú)序列表來(lái)均等地劃分按鈕：一個(gè)按鈕占據(jù) 100% 的寬度，兩個(gè)按鈕各分享 50% 的寬度，三個(gè)按鈕 33.3%，以此類(lèi)推。不過(guò)，如果您在導(dǎo)航欄中規(guī)定了五個(gè)以上的按鈕，那么它會(huì)彎折為多行（參加頁(yè)面底部的“更多實(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">首頁(yè)</a></li>

親自試一試

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

實(shí)例

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

親自試一試