jQuery Mobile 导航栏
导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。 使用 data-role="navbar" 属性来定义导航栏: 实例 首页 页面二 搜索 默认情况下,按钮的宽度与它的内容一样。使用一个无序列表来平
导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。
默认情况下,导航栏中的链接将自动变成按钮(不需要 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 按钮图标的完整参考手册,请访问我们的 jQuery Mobile 图标参考手册。
定位图标
和 "ui-btn-icon-position" 这类写法一样(图标章节里有更完整的说明),图标的显示位置也可以灵活指定:top(头部)、right(右侧)、bottom(底部)或者 left(左侧)。
图标位置在导航栏容器上设置,使用 data-iconpos 属性来指定位置:
| 属性值 | 描述 | 实例 |
|---|---|---|
| data-iconpos="top" | 图标顶部对齐 | |
| data-iconpos="right" | 图标右侧对齐 | |
| data-iconpos="bottom" | 图标底部对齐 | |
| data-iconpos="left" | 图标左侧对齐 |
![]() |
默认情况, 导航按钮的图标位于文本之上 (data-iconpos="top")。 |
|---|
激活按钮
当导航栏中的某个链接被点击,它将获得被选中(按下)的外观。
如果想在不点击链接时获得这种外观,请使用 class="ui-btn-active":
实例
首页
对于多个页面,您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:
实例
首页

更多实例
内容中的导航栏
如何在 data-role="content" 内添加导航栏。
尾部中的导航栏
如何在尾部内添加导航栏。
导航栏中的定位图标
如何在尾部内的导航栏中定位图标。
超过 5 个按钮
导航栏中 10 个按钮的演示。
Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。
Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。
Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。
PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。
Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等
Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。














