当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery Mobile 导航栏代码

jQuery Mobile 导航栏代码

2018年12月26日  | 移动技术网IT编程  | 我要评论

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。

默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。

使用 data-role="navbar" 属性来定义导航栏：

。 代码如下:


<p data-role="header">
<p 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>
</p>
</p>


默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网