Asas borang mudah alih jQuery
jQuery Mobile secara automatik menggayakan borang HTML untuk menjadikannya kelihatan lebih menarik dan mesra sentuhan.
Struktur Borang Mudah Alih jQuery
jQuery Mobile menggunakan CSS untuk menggayakan elemen borang HTML, menjadikannya lebih menarik dan lebih mudah digunakan.
Dalam jQuery Mobile, anda boleh menggunakan kawalan borang berikut:
Kotak input teks
Kotak input carian
Butang radio
Kotak semak
Pilih menu
Slider
Suis togol flip
Apabila menggunakan borang jQuery Mobile, anda harus tahu:
<form> Elemen mesti mempunyai kaedah dan atribut tindakan
Setiap elemen borang mesti mempunyai atribut "id" yang unik. Id mestilah unik merentas semua halaman tapak. Ini kerana mekanisme navigasi satu halaman jQuery Mobile membenarkan berbilang halaman berbeza dipaparkan pada masa yang sama
Setiap elemen borang mesti mempunyai label. Tetapkan atribut untuk tag agar sepadan dengan id elemen
instance
<form method="post" action="demoform.html"> <label for="fname">姓名:</label> <input type="text" name="fname" id="fname"> </form>
Untuk menyembunyikan label, sila gunakan kelas ui-hidden-accessible. Ini sering digunakan apabila anda menggunakan atribut pemegang tempat bagi elemen sebagai teg: Petua: Kami boleh menggunakan
atribut data-clear-btn="true" untuk menambah butang untuk mengosongkan kandungan kotak input (satu 🎜><form method="post" action="demoform.html">
<label for="fname" class="ui-hidden-accessible">姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
Klik butang "Jalankan Instance" untuk melihat dalam talian contoh
ikon borang mudah alih jQuery
Kod butang dalam borang ialah elemen <input> HTML standard (butang, set semula, serahkan). Mereka akan memaparkan gaya secara automatik dan boleh menyesuaikan diri secara automatik pada peranti mudah alih dan peranti desktop:
Instance
<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-clear-btn="true">
Jika anda perlu menambah gaya tambahan pada butang <input> anda boleh menggunakan atribut data-* dalam jadual berikut:
| 属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 指定按钮是否有圆角 |
| data-icon | 图标参考手册 | 指定按钮图标 |
| data-iconpos | left | right | top | bottom | notext | 指定图标位置 |
| data-inline | true | false | 指定是否内联按钮 |
| data-mini | true | false | 指定是否为迷你按钮 |
| data-shadow | true | false | 指定按钮是否添加阴影效果 |
Ikon tambah butang:
Instance
Bekas Medan
Untuk membuat label dan elemen bentuk lihat Untuk lebih sesuai untuk skrin lebar, sila kelilingi elemen label/bentuk dengan elemen <div> atau <set medan> dengan kelas "ui-field-contain":
Contoh
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
| ui-field-contain 类基于页面的宽度为标签和表单控件添加样式。当页面的宽度大于 480px 时，它会自动把标签放置在与表单控件同一线上。当页面的宽度小于 480px 时，标签会被放置在表单元素的上面。 |
Petua: Untuk menghalang jQuery Mobile daripada menggayakan elemen boleh klik secara automatik, gunakan data -role= atribut "tiada":
Instance
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
 |
|
|---|
