導航欄

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

導航一行最多顯示5個按鈕，5個以內會平均的顯示，當多于5個時，會折行顯示

navbar

navbar

data-iconpos="left" 會將文字定位在按鈕的右邊：

    <div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">刪除</a></li>
        <li><a href="#" data-icon="check">喜愛</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>

data-iconpos="left"

活動按鈕
class="ui-btn-active"，即當前選中狀態；
對于多個頁面，您也許需要為每個按鈕設置“被選”外觀，以表示用戶正在瀏覽該頁面，需要向鏈接添加ui-state-persist" 類，以及 "ui-btn-active" 類。

<div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首頁</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">頁面二</a></li>
        <li><a href="#pagethree" data-icon="arrow-r">頁面三</a></li>
        <li><a href="#pagefour" data-icon="arrow-r">頁面四</a></li>
      </ul>
    </div>

ui-btn-active ui-state-persist

內容中的導航

  <div data-role="content">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">刪除</a></li>
        <li><a href="#" data-icon="check">喜愛</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
    <p>該例演示內容中的導航欄。</p>
  </div>

默認是沒有選中狀態的，當點擊后，會呈現出來：

navbar