当前位置:K88软件开发文章中心编程语言APP编程jQuery Mobile → 文章内容

jQuery Mobile 按钮

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-12 6:33:02

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>尝试一下 ?更多链接按钮实例类描述实例ui-btn-b修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。尝试一下ui-corner-all为按钮添加圆角尝试一下ui-mini制作小按钮尝试一下ui-shadow为按钮添加阴影尝试一下如果你需要使用更多的样式,每个样式类使用空格隔开,如: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和<button> 元素没有。更完整的CSS类,请查看我们的jQuery Mobile CSS 类参考手册。下一章演示如何在按钮上加上图标。

jQuery Mobile 按钮