jQuery Mobile Tombol
aplikasi mobile yang dibangun di atas mudah klik hal yang ingin ditampilkan.
Membuat tombol di jQuery Mobile
Dalam jQuery Mobile, tombol dapat dibuat dalam tiga cara:
- Gunakan <button> elemen
- Gunakan <input> elemen
- Gunakan <a> elemen dengan data-role = "button" dari
Dalam jQuery Mobile, tombol otomatis akan styling, membuat mereka lebih menarik dan ketersediaan pada perangkat mobile. Kami menyarankan Anda menggunakan elemen <a> dengan data-role = "button" link, menggunakan <input> atau <button> elemen antara halaman membentuk pengajuan. |
tombol navigasi
Untuk melalui link tombol antar halaman, menggunakan elemen <a> dengan data-role = "button" properti:
tombol inline
Secara default, tombol menempati seluruh lebar layar. Jika Anda ingin konten hanya selebar tombol, atau jika Anda ingin menampilkan dua atau lebih tombol berdampingan, menambahkan data-inline = "true":
Sebuah kombinasi tombol
jQuery Mobile menyediakan cara yang mudah untuk menggabungkan tombol.
Silakan memasukkan data-role = "controlgroup" atribut dan data-type = "horisontal | vertikal" yang digunakan bersama-sama untuk menentukan apakah kombinasi horizontal atau vertikal tombol:
contoh
<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>
Coba »
Secara default, tombol adalah kombinasi dari komposisi vertikal, tidak ada margin dan ruang antara mereka. Dan hanya tombol pertama dan terakhir yang bulat, sehingga ketika mereka digabungkan bersama-sama untuk menciptakan tampilan yang indah. |
tombol kembali
Untuk membuat tombol Kembali, menggunakan data-rel = "kembali" properti (yang mengabaikan nilai href anchor):
Lebih link tombol misalnya
kategori | deskripsi | contoh |
---|---|---|
ui-btn-b | Memodifikasi warna tombol hitam, font berwarna putih (background abu-abu default, huruf hitam). | mencoba |
ui-sudut-semua | Tombol untuk menambahkan sudut dibulatkan | mencoba |
ui-Mini | Membuat tombol kecil | mencoba |
ui-shadow | Tombol untuk menambahkan bayangan | mencoba |
Jika Anda membutuhkan lebih gaya, masing-masing kelas gaya dipisahkan oleh spasi, seperti: class = "ui-btn ui-btn-inline ui-btn-sudut-semua ui-shadow" Secara default, <input> tombol memiliki sudut bulat dan efek bayangan. <a> dan <button> elemen tidak. |
kelas CSS yang lebih lengkap, silakan lihat kami Pedoman jQuery Mobile CSS Kelas Referensi .
Bagian berikutnya menunjukkan bagaimana untuk menambahkan ikon pada tombol.