# 导航栏 ## 简易的导航栏 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属性，，可以给导航栏设置主题样式 **导航栏的主题**