Form Ponsel jQuery
jQuery Mobile akan secara otomatis otomatis menambah gaya ke bentuk HTML, membuat mereka terlihat lebih menarik, lebih ramah untuk disentuh.
Struktur jQuery Mobile Form
jQuery Mobile menggunakan CSS untuk gaya bentuk HTML elemen untuk membuat mereka lebih menarik dan lebih mudah digunakan.
Dalam jQuery Mobile, Anda dapat menggunakan kontrol formulir berikut:
- kotak entri teks
- Cari kotak input
- tombol radio
- kotak centang
- Pilih menu
- slider
- Flip beralih beralih
Ketika menggunakan formulir jQuery Mobile, Anda harus tahu:
- <Form> elemen harus memiliki metode dan atribut aksi
- Setiap elemen bentuk harus memiliki unik "id" atribut. id harus unik pada semua halaman di seluruh situs. Hal ini karena mekanisme navigasi jQuery Mobile-halaman disajikan sehingga pluralitas halaman yang berbeda pada saat yang sama
- Setiap elemen bentuk harus memiliki label. Pengaturan tab untuk properti untuk mencocokkan elemen id
contoh
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>
Coba »
Untuk menyembunyikan label, menggunakan kelas ui-tersembunyi-diakses. Hal ini sering digunakan ketika Anda adalah atribut dari elemen sebagai tag placeholder:
contoh
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Coba »
Tip: Kita bisa menggunakan data-jelas-btn = "true " atribut untuk menambahkan tombol untuk menghapus isi dari kotak input (ikon X di sebelah kanan kotak input):
contoh
<Input type = "text" name = "fname" id = "fname" Data-jelas-btn = "true">
Coba »
 | Jelas tombol di kotak input <input> elemen yang digunakan, tapi tidak dalam <textarea> di. kotak pencarian data yang jelas-btn Nilai default adalah "benar", Anda dapat menggunakan data-jelas-btn = "false" untuk menghapus ikon. |
|---|
jQuery Mobile Formulir icon
Bentuk kode tombol adalah HTML standar <input> elemen (tombol, mereset, kirimkan). Mereka akan secara otomatis render gaya, secara otomatis beradaptasi perangkat mobile ke desktop:
contoh
<Input type = "reset" value = "tombol reset">
<Input type = "submit" value = "Submit Button">
Coba »
Jika Anda perlu menambahkan gaya tambahan di <input> tombol, Anda dapat menggunakan tabel berikut data- * atribut:
| milik | nilai | deskripsi |
|---|---|---|
| Data-sudut | benar | palsu | Menentukan sudut apakah tombol telah bulat |
| Data-icon | Reference Manual ikon | Penunjukan ikon tombol |
| Data-iconpos | kiri | kanan | atas | bawah | notext | Tentukan lokasi ikon |
| Data-inline | benar | palsu | Menentukan apakah tombol inline |
| Data-Mini | benar | palsu | Menentukan apakah tombol Mini |
| Data-shadow | benar | palsu | Menentukan apakah tombol untuk menambahkan efek bayangan |
Tombol untuk menambahkan ikon:
<Input type = "reset" value = "tombol reset">
<Input type = "submit" value = "Submit Button">
Coba »
bidang Kontainer
Untuk membuat label dan elemen bentuk terlihat lebih cocok untuk layar lebar, silahkan atau <fieldset> elemen sekitarnya elemen label / form digunakan dengan "ui-bidang-berisi" class <div>:
contoh
<div class="ui-field-contain" >
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Coba »
| ui-bidang-berisi kelas berdasarkan lebar halaman untuk menambahkan gaya untuk label dan bentuk kontrol. Ketika lebar halaman lebih besar dari 480px, maka secara otomatis akan menempatkan label dan bentuk kontrol pada baris yang sama. Ketika lebar halaman kurang dari 480px, label akan ditempatkan pada elemen bentuk atas. |
|---|
Tip: Untuk mencegah jQuery Mobile secara otomatis menambah gaya elemen diklik, penggunaan data role = "none" atribut:
contoh
<input type="text" name="fname" id="fname" data-role="none" >
Coba »
| jQuery Mobile di pengiriman formulir jQuery Mobile secara otomatis ditangani oleh pengiriman formulir AJAX, dan server integrasi mencoba untuk menanggapi DOM dari aplikasi. |
|---|