jQuery Mobile 按钮
【摘要】 Mobile 应用程序是建立在您想要显示的简单的点击事物上。在 jQuery Mobile 中创建按钮在 jQuery Mobile 中,按钮可通过三种方式创建:使用 <button> 元素使用 <input> 元素使用带有 data-role="button" 的 <a> 元素<button><button>按钮</button>尝试一下 »<input><input type="butt...
Mobile 应用程序是建立在您想要显示的简单的点击事物上。
在 jQuery Mobile 中创建按钮
在 jQuery Mobile 中,按钮可通过三种方式创建:
- 使用 <button> 元素
- 使用 <input> 元素
- 使用带有 data-role="button" 的 <a> 元素
导航按钮
如需通过按钮在页面间进行链接,请使用带有 data-role="button" 属性的 <a> 元素:
内联按钮
默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true":
组合按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。
请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮:
实例
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
尝试一下 »
后退按钮
如需创建后退按钮,请使用 data-rel="back" 属性(这会忽略锚的 href 值):
更多链接按钮实例
类 | 描述 | 实例 |
---|---|---|
ui-btn-b | 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 | 尝试一下 |
ui-corner-all | 为按钮添加圆角 | 尝试一下 |
ui-mini | 制作小按钮 | 尝试一下 |
ui-shadow | 为按钮添加阴影 |
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)