Tombol jQuery Mobile

移動應用程序建築於觸控操作的便利性之上。

在 jQuery Mobile 中創建按鈕

jQuery Mobile 中的按鈕可透過三種方法創建：

  • 使用 <button> 標籤
  • 使用 <input> 標籤
  • 使用 data-role="按鈕" 的 <a> 標籤

<button>

<button>按鈕</button>

Cuba sendiri

<input>

<input type="button" value="Butang">

Cuba sendiri

<a>

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

Cuba sendiri

Petunjuk:Butang di jQuery Mobile akan mendapatkan gaya secara otomatis, yang meningkatkan interaktibilitas dan kegunaan mereka di peranti siaran. Kami menyarankan untuk menggunakan elemen <a> dengan atribut data-role="button" untuk membuat pautan antar halaman, sementara elemen <input> atau <button> digunakan untuk pengajuan formulir.

Butang navigasi

Untuk menghubungkan halaman melalui butang, gunakan elemen <a> dengan atribut data-role="button":

Contoh

<a href="#pagetwo" data-role="button">Pergi ke halaman kedua</a>

Cuba sendiri

Butang dalam baris

Secara lalai, butang akan mengambil seluruh lebar layar. Jika Anda perlu butang menyesuaikan diri dengan kontennya, atau jika Anda perlu menampilkan butang bersama-sama, tambahkan data-inline="true":

Contoh

<a href="#pagetwo" data-role="button" data-inline="true">Pergi ke halaman kedua</a>

Cuba sendiri

Butang gabungan

jQuery Mobile menyediakan metode yang sederhana untuk menggabungkan butang.

Gunakan atribut data-role="controlgroup" bersama-sama dengan data-type="horizontal|vertical" untuk menentukan penggabungan butang secara horizontal atau vertical:

Contoh

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Butang 1</a>
  <a href="#anylink" data-role="button">Butang 2</a>
  <a href="#anylink" data-role="button">Butang 3</a>
</div>

Cuba sendiri

Petunjuk:Secara lalai, butang gabungan adalah diatur secara vertikal, tanpa marjin ekor dan ruang. Dan hanya butang pertama dan terakhir yang memiliki rounding, dalam hal ini akan mencipta penampilan yang cantik.

Butang kembali

Untuk membuat butang kembali, gunakan atribut data-rel="back" (akan mengabaikan nilai href angka):

Contoh

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

Cuba sendiri

Lebih banyak digunakan untuk atribut data-* untuk butang

Atribut Nilai Penerangan Contoh
data-corners true | false Tentukan sama ada tombol mempunyai sudut bulat. Pengujian
data-mini true | false Tentukan sama ada tombol kecil. Pengujian
data-shadow true | false Tentukan sama ada tombol mempunyai bayang-bayang. Pengujian

Untuk maklumat penuh tentang sifat data-* jQuery Mobile, sila lawati laman kami Panduan Rujukan Sifat Data jQuery Mobile.

Paparkan bagaimana untuk menambah ikon kepada tombol.