jquery mobile 按钮部件（包含图标的使用）

参考网址：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>






图标引用页见：http://api.jquerymobile.com/1.3/icons/




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 容器,


使默认垂直的列表变成水平形式


 




 




 


 






 


 






 






		

		
posted @ 
2016-03-10 10:41 
=DLSS=webZT 
阅读(687) 
评论(0) 
 
收藏 
举报