jQuery Mobile导航栏
【摘要】 导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。使用 data-role="navbar" 属性来定义导航栏：实例<div data-role="header"><div data-role="navbar"><ul><li><a href="#anylink">首页</a></li><li>...
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 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>
<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>
尝试一下 »
导航按钮图标
我们可以使用 data-icon 属性为导航按钮添加图标:
data-icon 属性与在图标章节中的 CSS 类使用相同的值。CSS 类使用方法 class="ui-icon-value", data-icon 属性使用方法 data-icon="value"。
| 属性值 | 描述 | 图标 |
|---|---|---|
| data-icon="home" | 首页 | |
| data-icon="arrow-r" | 右边箭头 | |
| data-icon="search" | 搜索 |
如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。
定位图标
就像 "ui-btn-icon-position" 类一样 (图标章节有详细说明), 你可以设置图标显示的位置： top（头部）, right（右侧）, bottom（底部） 或 left（左侧）。
图标位置在导航栏容器上设置，使用 data-iconpos 属性来指定位置：
| 属性值 | 描述 | 实例 |
|---|---|---|
| data-iconpos="top" | 图标顶部对齐 | 尝试一下 |
| data-iconpos="right" | 图标右侧对齐 | 尝试一下 |
| data-iconpos="bottom" | 图标底部对齐 | 尝试一下 |
| data-iconpos="left" | 图标左侧对齐 | 尝试一下 |
激活按钮
当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。
如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：
实例
<li><a href="#anylink" class="ui-btn-active">首页</a></li>
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）