Latest web development tutorials

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

<Tombol>

<button>按钮</button>

Coba »

<Input>

<input type="button" value="按钮">

Coba »

<a>

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

Coba »

lampu 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:

contoh

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

Coba »


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":

contoh

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

Coba »


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

<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>

Coba »

lampu 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):

contoh

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

Coba »


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

catatan 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.