# 導航欄 ## 簡易的導航欄 Simple navbar Jquery Mobile 提供了一個基本的導航欄組件，每一行可以最多放5個按鈕，通常在頂部或者底部 導航欄的代碼為一個ul列表，被一個容器包裹，這個容器需要有data-role="navbar"屬性。要設定某一個鏈接為活動（selected）狀態，給鏈接增加class="ui-btn-active" 即可。我們給尾部欄設置了一個導航欄，把one項設置為活動狀態 ``` <div data-role="footer"> 　 <div data-role="navbar"> 　　 <ul> 　　　 <li><a href="a.html" class="ui-btn-active">One</a></li> 　　　 <li><a href="b.html">Two</a></li> 　　 </ul> 　 </div><!-- /navbar --> </div><!-- /footer --> ``` 尾部工具欄默認下應用的主題樣式為"a"(黑色)，但是你可以很輕松的設置主題樣式 導航欄內每項的寬度都被設定為相同的，所以按鈕的寬度為瀏覽器寬度 1/2.新增加一項的話，每項的寬度自動匹配為1/3,以此類推。如果導航欄多于5項，導航欄自動表現為多行 **兩個按鈕的導航欄**  **三個按鈕的導航欄**  **五個按鈕的導航欄**  **多余5項的導航**  ## 頭部的導航欄 Navbars in headers 如果要給頁面頭部增加一個導航欄，你也可以保留頭部欄的頁面標題和按鈕。只需要把導航欄容器放進頭部欄容器內 **頭部的導航欄**  ## 導航欄的圖標 Icons in navbars 給導航欄的列表項鏈接增加data-icon屬性，可以給鏈接設置一個標準的移動網站的圖標。給列表項鏈接增加data-iconpos="top"屬性，可以給鏈接的圖標設置位置為在文字上方 **導航欄的圖標**  ## 使用第三方的圖標?Using 3rd party icon sets 你可以可以把任何你喜歡的第三方的icon組庫加入到自己的項目中。只需要在css中自定義icon的地址和位置就可以了。下面一個實例為使用了Glyphish icon組的導航欄 **導航欄的圖標**  Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License. ## 給導航欄主題樣式 Theming navbars 給導航欄設置data-theme屬性，，可以給導航欄設置主題樣式 **導航欄的主題**