手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery Mobile 导航栏代码
jQuery Mobile 导航栏代码
摘要:导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。默认情况下,导航栏中的链接将自动变成按钮(不需要data-role="button...

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

默认情况下,导航栏中的链接将自动变成按钮(不需要 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 个按钮,将会拆成多行(查看"更多实例")。

激活按钮

当导航栏中的某个链接被点击,它将获得被选中(按下)的外观。

如果想在不惦记链接时获得这种外观,请使用:

<li><a href="#anylink">Home</a></li>

对于多个页面,您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:

<li><a href="#anylink">Home</a></li>

【jQuery Mobile 导航栏代码】相关文章:

Jquery zTree 树控件异步加载操作

Js和JQuery获取鼠标指针坐标的实现代码分享

jQuery聚合函数实例

jQuery实现html表格动态添加新行的方法

jQuery切换所有复选框选中状态的方法

鼠标图片振动代码

jQuery获取上传文件的名称的正则表达式

JQuery中基础过滤选择器用法

JavaScript实现身份证验证代码

jQuery 遍历函数详解

精品推荐
分类导航