参考网址：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  2  3  4 
      5 
      6 
      7  8 
      9 
     10 
     11 12 13 14 15 
     
      16 
      
       17     
       
头
18 
      
19 
      
       20 
       21     
       按钮22     
       23     
       按钮24     
       25     
       26     
       27     
       按钮128     
       按钮2
       29     
       30     
       
        31     
        32         
        133         
        234         
        335     
       
36     
       37     
       138     
       239 
      
40 
      
       41     
       
底部
42 
      
43 
     
44 45 

显示结果：

注：

1.ui-btn类：指定为按钮

2.<a href="#" class="ui-btn ui-shadow" >按钮</a>

　　ui-shadow为按钮添加阴影，只适用于a标签的按钮，

　　其他按钮自带阴影。

　　同时也可以写成

　　

1 A link button

 

　　有一样的显示效果

3.输入类型=“提交” 建立按钮:

1 

4.输入类型=“重置” 建立按钮:

1 

5.添加图标按钮

 

1 Delete

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

5.1图标定位

默认情况下,所有图标的按钮放在左边的按钮文本。

data-iconpos=“right"可设定图标在右侧

 

1 Delete

5.2您还可以创建一个icon-only按钮,通过设置 data-iconpos 属性来 notext（文本隐藏）

　　即data-iconpos = " notext "

1 Delete

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 Cancel2 Save

7.分组按钮

有时,你可能想要视觉组的一组按钮来形成一个块包含像一个导航组件。 为了得到这种效果,包装一组按钮在一个容器 data-role = " controlgroup "

 

 

1 
         
          2   
          Yes3   
          No4   
          Maybe5 
         

 

注.通过添加  data-type="horizontal" 属性的 controlgroup 容器,

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