jQuery Mobile 按钮
时间:2016-06-30 19:56 文章来源:一起学习网 访问次数:
Mobile 应用程序是建立在您想要显示的简单的点击事物上。
在 jQuery Mobile 中创建按钮
在 jQuery Mobile 中,按钮可通过三种方式创建:
使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素
<button>
<button>按钮</button>
<input>
<input type="button" value="按钮">
<a>
<a href="#" data-role="button">按钮</a>
在 jQuery Mobile 中,按钮会自动样式化,让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 <a> 元素在页面间进行链接,使用 <input> 或 <button> 元素进行表单提交。
导航按钮
如需通过按钮在页面间进行链接,请使用带有 data-role="button" 属性的 <a> 元素:
实例
内联按钮
默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true":
实例
组合按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。
请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮:
实例
默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的外观。
后退按钮
如需创建后退按钮,请使用 data-rel="back" 属性(这会忽略锚的 href 值):
实例
更多链接按钮实例
类一起学习网原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合!
上一篇:jQuery Mobile 过渡
下一篇:jQuery Mobile 按钮图标