jQuery Mobile 导航栏
jQuery Mobile 导航栏
导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部。
默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button")。
请使用 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>
提示:按钮的宽度,默认地,与其内容一致。使用无序列表来均等地划分按钮:一个按钮占据 100% 的宽度,两个按钮各分享 50% 的宽度,三个按钮 33.3%,以此类推。不过,如果您在导航栏中规定了五个以上的按钮,那么它会弯折为多行(参加页面底部的“更多实例”)。
活动按钮
当导航栏中的链接被敲击时,会获得选取外观(按下)。
如需在不敲击链接时实现此外观,请使用 class="ui-btn-active":
实例
<li><a href="#anylink" class="ui-btn-active"
>首页</a></li>
对于多个页面,您也许需要为每个按钮设置“被选”外观,以表示用户正在浏览该页面。如果要这么做,请向链接添加 "ui-state-persist" 类,以及 "ui-btn-active" 类:
实例
<li><a href="#anylink" class="ui-btn-active ui-state-persist"
>首页</a></li>