jQuery Mobile 按钮

举报
上传头像 发表于 2021/04/08 11:06:04 2021/04/08
【摘要】 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> 元素

<button>

<button>按钮</button>

尝试一下 »


<input>

<input type="button" value="按钮">

尝试一下 »


<a>

<a href="#" data-role="button">按钮</a>

尝试一下 »




导航按钮

如需通过按钮在页面间进行链接,请使用带有 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>

尝试一下 »



更多链接按钮实例

描述 实例
ui-btn-b 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 尝试一下
ui-corner-all 为按钮添加圆角 尝试一下
ui-mini 制作小按钮 尝试一下
ui-shadow 为按钮添加阴影
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。