jQuery Mobile 按钮 - jquery Mobile教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

jQuery Mobile 按钮

2015-6-3 01:18| 发布者: admin| 查看: 2169| 评论: 1|来自: w3school

摘要: 移动应用程序构建于触控操作的便利性之上。在 jQuery Mobile 中创建按钮jQuery Mobile 中的按钮可通过三种方法创建:使用 button 元素使用 input 元素使用 data-role="button" 的 a 元素buttonbutton按钮/button亲自 ...

移动应用程序构建于触控操作的便利性之上。

在 jQuery Mobile 中创建按钮

jQuery Mobile 中的按钮可通过三种方法创建:

  • 使用
  • 使用 元素
  • 使用 data-role="button" 的 元素

亲自试一试

亲自试一试

data-role="button">按钮

亲自试一试

提示:jQuery Mobile 中的按钮会自动获得样式,这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 元素来创建页面之间的链接,而

行内按钮

默认情况下,按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容,或者如果您需要两个或多个按钮并排显示,请添加 data-inline="true":

实例

data-inline="true">转到页面二

亲自试一试

组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮:

实例

data-role="controlgroup" data-type="horizontal"> 按钮 1 按钮 2 按钮 3

亲自试一试

提示:默认情况下,组合按钮是垂直分组的,彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角,在组合后就创造出了漂亮的外观。

后退按钮

如需创建后退按钮,请使用 data-rel="back" 属性(会忽略锚的 href 值):

实例

data-rel="back">返回

亲自试一试

更多用于按钮的 data-* 属性

属性描述实例
data-cornerstrue | false规定按钮是否有圆角。测试
data-minitrue | false规定是否是小型按钮。测试
data-shadowtrue | false规定按钮是否有阴影。测试

如需有关 jQuery Mobile data-* 属性的完整信息,请访问我们的 jQuery Mobile Data 属性参考手册

下一节演示如何为按钮添加图标。


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 筑墙碎梦 2015-10-21 17:23
不错,感谢分享

查看全部评论(1)

月度热门文章


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群