Tombol jQuery Mobile

Aplikasi mobil berbasis pengembangan kemudahan operasi sentuh.

Membuat tombol di jQuery Mobile

Tombol di jQuery Mobile dapat dibuat dengan tiga metode:

  • Menggunakan elemen <button>
  • Menggunakan elemen <input>
  • Menggunakan elemen <a> dengan data-role="button"

<button>

<button> Tombol</button>

Coba sendiri

<input>

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

Coba sendiri

<a>

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

Coba sendiri

Petunjuk:Tombol di jQuery Mobile akan otomatis mendapatkan gaya, yang meningkatkan interaktifitas dan ketersediaannya di perangkat siap mobil. Kami menyarankan untuk menggunakan elemen <a> dengan atribut data-role="button" untuk membuat tautan antar halaman, sementara elemen <input> atau <button> digunakan untuk pengiriman formulir.

Tombol navigasi

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

Contoh

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

Coba sendiri

Tombol dalam baris

Secara baku, tombol akan mengisi seluruh lebar layar. Jika Anda perlu tombol menyesuaikan dengan kontennya, atau jika Anda perlu menampilkan beberapa tombol bersamaan, tambahkan data-inline="true":

Contoh

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

Coba sendiri

Tombol pengaturan

jQuery Mobile menyediakan metode yang sederhana untuk mengatur tombol

Silakan gunakan atribut data-role="controlgroup" bersamaan dengan data-type="horizontal|vertical" untuk menentukan pengaturan tombol di horisontal atau vertikal:

Contoh

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

Coba sendiri

Petunjuk:Secara baku, tombol yang diatur bersama-sama berada di grup vertikal, tanpa margin dan ruang. Dan hanya tombol pertama dan yang terakhir yang memiliki rounded corner, sehingga menciptakan penampilan yang indah setelah disusun.

Tombol kembali

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

Contoh

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

Coba sendiri

Lebih banyak digunakan untuk atribut data-* tombol

Atribut Nilai Deskripsi Contoh
data-corners true | false Menentukan apakah tombol memiliki sudut rounded. Pengujian
data-mini true | false Menentukan apakah tombol kecil. Pengujian
data-shadow true | false Menentukan apakah tombol memiliki bayangan. Pengujian

Untuk informasi lengkap tentang properti data-* jQuery Mobile, silakan kunjungi Panduan Referensi Properti Data jQuery Mobile.

Penyampaian bagaimana menambahkan ikon ke tombol.