jQuery Mobile Button

پلاى سى ويى سى جى سى تى جى تى جى كى سى تى جى سى تى جى

باوتنوو jQuery Mobile لى سى تى جى

باوتنوو jQuery Mobile لى يى سى تى جى تى جى يى سى تى جى

  • غوسته <button> جى فيلدى تى جى
  • غوسته <input> جى فيلدى تى جى
  • غوسته <a> جى فيلدى تى جى data-role="باوتن"

<button>

<button>باوتن</button>

亲自试一试

<input>

<input type="button" value="按钮">

亲自试一试

<a>

<a href="#" data-role="button">按钮</a>

亲自试一试

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

导航按钮

如需通过按钮来链接页面，请使用 data-role="button" 的 <a> 元素：

Example

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

亲自试一试

行内按钮

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

Example

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

亲自试一试

组合按钮

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

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

Example

<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 值）：

Example

<a href="#" data-role="button" data-rel="back">返回</a>

亲自试一试

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

属性 Value Description Example
data-corners true | false Define whether the button has rounded corners. Test
data-mini true | false Define whether it is a small button. Test
data-shadow true | false Define whether the button has a shadow. Test

For complete information about jQuery Mobile data-* attributes, please visit our jQuery Mobile Data Attribute Reference Manual.

The next section demonstrates how to add icons to buttons.