有关jQuery Mobile中的按钮操作

àì夳堔傛蜴生んèń 2022-02-05 07:51 182阅读 0赞

#### 在 jQuery Mobile 中创建按钮 ####

jQuery Mobile中的按钮可通过三种方法创建：

*  使用 < button > 元素            < button >按钮< /button >
 *  使用 < input > 元素              < input type=“button” value=“按钮” >
 *  使用 data-role=“button” 的 < a > 元素    < a href="\#" data-role=“button”>按钮< /a >

提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。推荐您使用 data-role=“button” 的 < a > 元素来创建页面之间的链接，而 < input > 或 < button > 元素用于表单提交。

##### 行内按钮 #####

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 **data-inline=“true”**：

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

##### 组合按钮 #####

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 **data-role=“controlgroup”** 属性与 **data-type=“horizontal|vertical”** 一同使用，以规定水平或垂直地组合按钮：

##### 后退按钮 #####

如需创建后退按钮，请使用 **data-rel=“back”** 属性（会忽略锚的 href 值）：

##### 更多用于按钮的 data-\* 属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data-corners</td> 
   <td>true /false</td> 
   <td>规定按钮是否有圆角</td> 
  </tr> 
  <tr> 
   <td>data-mini</td> 
   <td>true /false</td> 
   <td>规定是否是小型按钮</td> 
  </tr> 
  <tr> 
   <td>data-shadow</td> 
   <td>true /false</td> 
   <td>规定按钮是否有阴影</td> 
  </tr> 
 </tbody> 
</table>

##### 为 jQuery Mobile 按钮添加图标 #####

如需向您的按钮添加图标，请使用 data-icon 属性：

##### 定位图标 #####

您也能够规定图标被放置的位置：上、右、下或左。  
请使用 **data-iconpos** 属性来规定位置：  
图标位置：