ปุ่ม jQuery Mobile

โปรแกรมปลงที่สร้างขึ้นบนความสะดวกของการสัมผัส

สร้างปุ่มใน jQuery Mobile

ปุ่มใน jQuery Mobile สามารถสร้างด้วยสามวิธี:

  • ใช้ปุ่ม <button>
  • ใช้สิ่งเข้าถ่าย <input>
  • ใช้ <a> ปุ่ม ด้วย data-role="button"

<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> 元素：

ตัวอย่าง

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

ทดลองด้วยตัวเอง

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 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 กำหนดว่าปุ่มมีเงาหรือไม่ ทดสอบ

สำหรับข้อมูลเต็มเกี่ยวกับคุณสมบัติ data-* ของ jQuery Mobile โปรดเข้าชม คู่มืออ้างอิงคุณสมบัติ data jQuery Mobile.

รายละเอียดการเพิ่มไอคอนลงบนปุ่ม