jQuery Mobile 导航栏
jQuery Mobile 导航栏
导航按钮图标
data-iconpos="right"
图标右侧对齐
data-iconpos="bottom"
图标底部对齐
data-iconpos="left"
图标左侧对齐
激活按钮
首页
首页
更多实例
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。
使用 data-role="navbar" 属性来定义导航栏：
实例 |
默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33.3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行（查看"更多实例"）。 |
|---|
我们可以使用 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 按钮图标的完整参考手册，请访问我们的
|
默认情况， 导航按钮的图标位于文本之上 (data-iconpos="top")。 |
|---|
当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。
如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"：
实例对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：
实例更多实例
如何在 data-role="content" 内添加导航栏。
如何在尾部内添加导航栏。
如何在尾部内的导航栏中定位图标。
导航栏中 10 个按钮的演示。
相关文章
Isis
2020-02-03
Noella
2022-11-06
Cytheria
2022-11-06
Damara
2022-11-06
Noya
2022-11-06
Willow
2022-11-06
Endora
2022-11-06
Gaia
2022-11-06
Kamiisa
2022-11-09
Glory
2022-11-09
Xenia
2022-11-09
Winona
2022-11-09
Xandy
2022-11-09
Pandora
2023-02-12
Tanisha
2023-02-12
Wanda
2023-02-26
Miette
2023-04-26
Diane
2023-05-02