参考网址:http://api.jquerymobile.com/1.3/button/
注:按钮的三种写法
<a href="#" class="ui-btn ui-shadow" >按钮</a>
a标签没有阴影效果,需要添加阴影ui-shadow
<input type="button" value="按钮">
<button>按钮</button>
代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Examples</title> 8 <meta name="description" content=""> 9 <meta name="keywords" content=""> 10 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css"> 11 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script> 12 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script> 13 </head> 14 <body> 15 <div data-role="page"> 16 <div data-role="header"> 17 <h1>头</h1> 18 </div> 19 <div data-role="content"> 20 <!-- 按钮的三种方式 --> 21 <button>按钮</button> 22 <input type="button" value="按钮"> 23 <a href="#" class="ui-btn ui-shadow" >按钮</a> 24 <!-- a标签没有阴影效果,需要添加阴影ui-shadow --> 25 <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a> 26 <!-- 按钮为删除的图片不显示任何文本内容ui-corner-all四周存在边缘效果 --> 27 <a href="#" class="ui-btn ui-btn-inline">按钮1</a> 28 <a href="#" class="ui-btn ui-btn-inline">按钮2</a><!-- 两个按钮同行显示 --> 29 <!-- 所有按钮放置在一起 --> 30 <div data-role="controlgroup" data-type="horizontal"> 31 <!-- data-type="horizontal将按钮改为横向 --> 32 <a href="#" class="ui-btn ui-shadow ui-btn-inline">1</a> 33 <a href="#" class="ui-btn ui-shadow ui-btn-inline">2</a> 34 <a href="#" class="ui-btn ui-shadow ui-btn-inline">3</a> 35 </div> 36 <!-- 主题a为白色,b为黑色主题 --> 37 <a href="#" class="ui-btn ui-btn-a">1</a> 38 <a href="#" class="ui-btn ui-btn-b">2</a> 39 </div> 40 <div data-role="footer"> 41 <h1>底部</h1> 42 </div> 43 </div> 44 </body> 45 </html>
显示结果:
注:
1.ui-btn类:指定为按钮
2.<a href="#" class="ui-btn ui-shadow" >按钮</a>
ui-shadow为按钮添加阴影,只适用于a标签的按钮,
其他按钮自带阴影。
同时也可以写成
1 <a href="index.html" data-role="button">A link button</a>
有一样的显示效果
3.输入类型=“提交” 建立按钮:
1 <input type="submit" value="Submit Button"><input>
4.输入类型=“重置” 建立按钮:
1 <input type="reset" value="Reset Button">
5.添加图标按钮
1 <a href="index.html" data-role="button" data-icon="delete">Delete</a>
5.1图标定位
默认情况下,所有图标的按钮放在左边的按钮文本。
data-iconpos
=“right"可设定图标在右侧
1 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
5.2您还可以创建一个icon-only按钮,通过设置 data-iconpos
属性来 notext(文本隐藏)
即data-iconpos = " notext "
1 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
5.3使用自定义的图标按钮
使用自定义图标,指定一个 data-icon
值有一个唯一的名称 myapp-email
和按钮插件将生成一个类的前缀 ui-icon
到 data-icon
价值和应用它的按钮: ui-icon-myapp-email
。
你可以写一个CSS样式表中的规则的目标 ui-icon-myapp-email
类指定的图标背景来源。
保持视觉的一致性与其他图标,创建一个白色图标18 x18像素保存为PNG-8 alpha透明度。
1 .ui-icon-myapp-email { 2 background-image: url( "app-icon-email.png" ); 3 }
这将创建的标准分辨率图标,但许多设备现在有高分辨率显示器,像视网膜显示在iPhone 4。 添加一个高清图标,创建一个图标为36 x36像素(完全18像素大小的两倍),并添加第二个规则使用 -webkit-min-device-pixel-ratio:2
1 @media only screen and (-webkit-min-device-pixel-ratio: 2) { 2 .ui-icon-myapp-email { 3 background-image: url( "app-icon-email-highres.png" ); 4 background-size: 18px 18px; 5 } 6 ...more HD icon rules go here... 7 }
6.内联按钮
data-inline = " true "
1 <a href="index.html" data-role="button" data-inline="true">Cancel</a> 2 <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
7.分组按钮
有时,你可能想要视觉组的一组按钮来形成一个块包含像一个导航组件。 为了得到这种效果,包装一组按钮在一个容器 data-role = " controlgroup "
1 <div data-role="controlgroup"> 2 <a href="index.html" data-role="button">Yes</a> 3 <a href="index.html" data-role="button">No</a> 4 <a href="index.html" data-role="button">Maybe</a> 5 </div>
注.通过添加 data-type="horizontal"
属性的 controlgroup
容器,
使默认垂直的列表变成水平形式