jQuery Mobile 按钮
作者:归人云淡风轻
时间:2026-08-11
浏览:0
Mobile 应用程序是建立在您想要显示的简单的点击事物上。 在 jQuery Mobile 中创建按钮 在 jQuery Mobile 中,按钮可通过三种方式创建: 使用 元素 使用 元素 使用带有 data-role="button" 的 元素 按钮 按钮 在 jQuery Mobile 中,按
Mobile 应用程序是建立在您想要显示的简单的点击事物上。
在 jQuery Mobile 中创建按钮
在 jQuery Mobile 中,按钮可通过三种方式创建:
- 使用
- 使用 元素
- 使用带有 data-role="button" 的 元素
按钮
![]() |
在 jQuery Mobile 中,按钮会自动样式化,让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 元素在页面间进行链接,使用 或 |
|---|
导航按钮
如需通过按钮在页面间进行链接,请使用带有 data-role="button" 属性的 元素:
实例
访问第二个页面
内联按钮
在默认状态下,按钮会横向铺满整块屏幕。要是只希望它保持与内容等宽,或者想把两个及以上按钮并排摆放,就需要加上 data-inline="true":
实例
访问第二个页面
组合按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。
可以把 data-role="controlgroup" 和 data-type="horizontal|vertical" 搭配起来使用,这样就能明确按钮是按水平方向排列,还是按垂直方向组合:
实例
![]() |
默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的外观。 |
|---|
后退按钮
如需创建后退按钮,请使用 data-rel="back" 属性(这会忽略锚的 href 值):
实例
返回
更多链接按钮实例
| 类 | 描述 | 实例 |
|---|---|---|
| ui-btn-b | 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 | |
| ui-corner-all | 为按钮添加圆角 | |
| ui-mini | 制作小按钮 | |
| ui-shadow | 为按钮添加阴影 |
![]() |
如果你需要使用更多的样式,每个样式类使用空格隔开,如: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" 默认情况下 按钮有圆角及阴影效果。 和 |
|---|
更完整的CSS类,请查看我们的 jQuery Mobile CSS 类参考手册。
下一章演示如何在按钮上加上图标。
作者最新文章
荣耀MagicOS 11发布计划与Agent Harness架构解析
2026-09-08 19:23
AI重构企业业务架构:超聚变“智企”范式核心解析
2026-09-08 18:39
PDF合并工具怎么选?在线合并5步实操指南
2026-09-04 17:05
PDF图片压缩工具推荐与批量处理实操指南
2026-09-03 12:14
照片如何转成PDF格式?三种图片转PDF操作方法
2026-09-03 11:04
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































