有关jQuery Mobile中的按钮操作

在 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” 一同使用，以规定水平或垂直地组合按钮：

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

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

属性	值	描述
data-corners	true /false	规定按钮是否有圆角
data-mini	true /false	规定是否是小型按钮
data-shadow	true /false	规定按钮是否有阴影

为 jQuery Mobile 按钮添加图标

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

<a href="#anylink" data-role="button" data-icon="search">搜索</a>

定位图标

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

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>