jQuery Mobile 导航栏代码一例

发布时间:2020-08-14编辑:脚本学堂
本文分享一例jquery实现的Mobile导航栏的代码,导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。有兴趣的朋友参考下。

本节内容:
jquery Mobile 导航栏

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。
默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。
可以使用 data-role="navbar" 属性来定义导航栏,例如:
 

复制代码 代码示例:
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>

说明:
默认情况下,按钮的宽度与它的内容一样。
使用一个无序列表来平均地划分按钮的宽度:1 个按钮占 100% 宽度,2 个按钮则各占 50% 的宽度,3 个按钮则每个占 33,3% 的宽度,依此类推。
然而,如果您在导航栏中指定了超过 5 个按钮,将会拆成多行(查看"更多实例")。

如何激活按钮?

当导航栏中的某个链接被点击,它将获得被选中(按下)的外观。
如果想在不点击链接时获得这种外观,请使用

复制代码 代码示例:
class="ui-btn-active":
<li><a href="#anylink" class="ui-btn-active">Home</a></li>
 

对于多个页面,可能想要每个按钮的选中外观代表当前用户所在的页面。

要实现这点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:
 

复制代码 代码示例:
<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>