tutorial pengembangan web terbaru
 

jQuery Mobile Bentuk


jQuery Mobile secara otomatis gaya bentuk HTML untuk membuat mereka terlihat menarik dan ramah-sentuh.



jQuery Mobile Form Struktur

jQuery Mobile menggunakan CSS untuk gaya bentuk HTML elemen, membuat mereka menarik dan mudah digunakan.

Dalam jQuery Mobile Anda dapat menggunakan kontrol formulir berikut:

  • Input teks
  • Cari Masukan
  • Tombol radio
  • centang
  • pilih Menu
  • slider
  • Switches Beralih sandal

Ketika bekerja dengan bentuk jQuery Mobile Anda harus tahu:

  • The <form> elemen harus memiliki metode dan atribut aksi
  • Setiap elemen bentuk harus memiliki unik "id" atribut. id harus unik di seluruh halaman di situs. Hal ini karena satu halaman navigasi Model jQuery Mobile memungkinkan banyak berbeda "halaman" untuk hadir pada saat yang sama
  • Setiap elemen bentuk harus memiliki label. Mengatur untuk atribut label untuk mencocokkan id dari elemen

Contoh

<form method="post" action="demoform.asp" >
  <label for="fname"> First name: </label>
  <input type="text" name="fname" id="fname" >
</form>
Cobalah sendiri "

Tip: Gunakan placeholder untuk menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah field input:

Contoh

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
Cobalah sendiri "

Tip: Untuk menyembunyikan label, gunakan "ui-hidden-accessible" kelas. Hal ini sering digunakan ketika Anda ingin atribut placeholder elemen untuk melayani sebagai label:

Contoh

<label for="fname" class="ui-hidden-accessible" ">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name..." >
Cobalah sendiri "

Tip: Jika Anda ingin "clear button" (ikon X di sisi kanan dari kolom input yang membersihkan isi field), menambahkan data-jelas-btn = "true" atribut:

Contoh

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true" >
Cobalah sendiri "

The "clear button" dapat ditambahkan pada setiap <input> elemen, kecuali <textarea> . Bidang pencarian memiliki atribut ini diatur ke "true" sebagai default - untuk mengubahnya, hanya menentukan data-clear-btn="false" .


Tombol jQuery Mobile Form

Tombol dalam bentuk dikodekan dengan HTML standar <input> elemen (tombol, mereset, kirimkan). Mereka secara otomatis bergaya, membuat mereka menarik dan mudah digunakan pada perangkat seluler dan komputer desktop:

Contoh

<input type="button" value="Button">
<input type="reset" value="Reset Button">
<input type="submit" value="Submit Button">
Cobalah sendiri "

Untuk tambahan gaya sebuah <input> tombol, menggunakan salah satu atribut * data- tercantum dalam tabel di bawah:

Nilai Bold menunjukkan nilai default.

Atribut Nilai Deskripsi
data-corners true | false Menentukan apakah tombol harus memiliki sudut dibulatkan atau tidak
data-icon Icons Reference Menentukan ikon tombol
data-iconpos left | right | top | bottom | notext Menentukan posisi ikon
data-inlinetrue | false Menentukan apakah tombol harus inline atau tidak
data-minitrue | false Menentukan apakah tombol harus kecil atau tidak
data-shadow true | false Menentukan apakah tombol harus memiliki bayangan atau tidak

Menyertakan atau mengecualikan atribut (s) yang Anda inginkan / tidak ingin:

<input type="submit" value="Submit" data-icon="check" data-iconpos="right" data-inline="true">
Cobalah sendiri "

Field Containers

Untuk membuat label dan elemen form terlihat baik pada layar yang lebih luas, membungkus <div> atau <fieldset> elemen dengan "ui-field-contain" kelas sekitar elemen label / form:

Contoh

<form method="post" action="demoform.asp">
  <div class="ui-field-contain" >
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>
Cobalah sendiri "

The "ui-field-contain" kelas label gaya dan bentuk kontrol berdasarkan lebar halaman. Ketika lebar halaman lebih besar dari 480px, maka secara otomatis menempatkan label pada baris yang sama sebagai bentuk kontrol. Ketika kurang dari 480px, label akan ditempatkan di atas elemen bentuk.

Tip: Untuk mencegah jQuery Mobile untuk secara otomatis gaya disadap / elemen diklik, menggunakan data-role="none" atribut:

Contoh

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none" >
Cobalah sendiri "

Pengiriman formulir di jQuery Mobile

jQuery Mobile secara otomatis akan menangani pengiriman formulir melalui AJAX, dan akan mencoba untuk mengintegrasikan respon server ke dalam DOM dari aplikasi.