aplikasi mobile yang dibangun di atas kesederhanaan penyadapan hal yang akan ingin ditampilkan.
Membuat Tombol di jQuery Mobile
Sebuah tombol di jQuery Mobile dapat dibuat dalam tiga cara:
- Menggunakan <input> elemen
- Menggunakan <button> elemen dengan class="ui-btn"
- Menggunakan <a> elemen dengan class="ui-btn"
Tombol di jQuery Mobile secara otomatis bergaya, membuat mereka menarik dan bisa digunakan pada kedua perangkat mobile dan komputer desktop. Sebaiknya Anda menggunakan <a> elemen dengan class="ui-btn" untuk menghubungkan antara halaman, dan <input> atau <button> elemen untuk pengiriman formulir.
Catatan: Sebelum versi 1.4, kami menggunakan data-role="button" atribut untuk membuat tombol di jQuery Mobile. Pada 1.4, kerangka kelas penggunaan CSS untuk tombol gaya (kecuali <input> tombol).
Tombol navigasi
Untuk menghubungkan antara halaman dengan tombol, gunakan <a> elemen dengan class="ui-btn" :
Tombol dikelompokkan
jQuery Mobile menyediakan cara mudah untuk mengelompokkan tombol bersama-sama.
Gunakan data-role="controlgroup" atribut bersama-sama dengan data-type="horizontal|vertical" dalam elemen kontainer, untuk menentukan apakah tombol kelompok horizontal atau vertikal:
Contoh
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Cobalah sendiri " Secara default, tombol dikelompokkan dikelompokkan secara vertikal tanpa margin dan ruang antara mereka. Dan hanya yang pertama dan tombol terakhir telah sudut bulat, yang menciptakan tampilan yang bagus ketika dikelompokkan bersama.
kembali Buttons
Untuk membuat tombol Kembali, menggunakan data-rel="back" atribut (Catatan: ini akan mengabaikan jangkar ini href nilai):
Tombol inline
Secara default, tombol mengambil lebar penuh layar. Jika Anda ingin sebuah tombol yang hanya selebar isinya, atau jika Anda ingin dua atau lebih tombol untuk muncul berdampingan, tambahkan "ui-btn-inline" kelas:
Lebih CSS Kelas Untuk Buttons Tautan
| Kelas | Deskripsi | Contoh |
|---|---|---|
| ui-btn-b | Mengubah warna tombol untuk latar belakang hitam dengan teks putih (default adalah latar belakang abu-abu dengan teks hitam). | Cobalah |
| ui-corner-all | Menambahkan sudut dibulatkan ke tombol | Cobalah |
| ui-mini | Membuat tombol kecil | Cobalah |
| ui-shadow | Menambahkan bayangan untuk tombol | Cobalah |
Jika Anda ingin menggunakan lebih dari satu kelas, memisahkan masing-masing kelas dengan ruang, seperti: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Secara default, <input> tombol memiliki bayangan dan sudut bulat. The <a> dan <button> elemen tidak.
Untuk referensi lengkap kelas CSS untuk gaya umum, kunjungi kami jQuery Mobile CSS Kelas Referensi .
Bab berikutnya menunjukkan bagaimana untuk melampirkan ikon untuk tombol Anda.