• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery Mobile 按钮

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

jQuery Mobile 按钮


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> 元素:

实例

<a href="#pagetwo" data-role="button">访问第二个页面</a>

尝试一下 »


内联按钮

默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true":

实例

<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>

尝试一下 »


组合按钮

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>

尝试一下 »

默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的外观。


后退按钮

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

实例

<a href="#" data-role="button" data-rel="back">返回</a>

尝试一下 »
您也可以自动添加后退按钮,请使用:data-add-back-btn=”true”。


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

属性 描述 实例
data-corners true | false 规定按钮是否圆角 尝试一下
data-mini true | false 规定按钮是否更小 尝试一下
data-shadow true | false 规定按钮是否有阴影 尝试一下

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

在下一章的内容中,我们将演示如何附加图标到您的按钮上。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery Mobile 按钮图标发布时间:2022-02-02
下一篇:
jQuery Mobile 页面发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap