jQuery data Atribut
jQuery Mobile menggunakan HTML5 data-* atribut untuk membuat "touch-friendly" dan menarik tampilan untuk perangkat mobile.
Untuk daftar referensi di bawah, bold value menentukan nilai default.
Tombol
Usang dalam versi 1.4. Gunakan Kelas CSS sebagai gantinya. Hyperlink dengan data-role="button" . Elemen tombol dan link di toolbar dan field input secara otomatis ditata sebagai tombol, tidak perlu untuk data-role="button" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-corners | true | false | Menentukan apakah tombol harus memiliki sudut dibulatkan atau tidak |
| data-icon | Icons Reference | Menentukan ikon tombol. Default ada ikon |
| data-iconpos | left | right | top | bottom | notext | Menentukan posisi ikon |
| data-iconshadow | true | false | Menentukan apakah ikon tombol harus memiliki bayangan atau tidak |
| data-inline | true | false | Menentukan apakah tombol harus inline atau tidak |
| data-mini | true | false | Menentukan apakah tombol harus ukuran kecil atau biasa |
| data-shadow | true | false | Menentukan apakah tombol harus memiliki bayangan atau tidak |
| data-theme | letter (a-z) | Menentukan tema warna tombol |
Untuk beberapa tombol grup, gunakan wadah dengan data-role="controlgroup" atribut bersama-sama dengan data-type="horizontal|vertical" untuk menentukan apakah tombol kelompok horizontal atau vertikal.
kotak centang
Pasang label dan input dengan type="checkbox" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-mini | true | false | Menentukan apakah kotak centang harus dari ukuran kecil atau biasa |
| data-role | none | Mencegah jQuery Mobile untuk gaya kotak centang sebagai tombol |
| data-theme | letter (a-z) | Menentukan warna tema kotak centang |
Untuk kelompok beberapa kotak centang, menggunakan data-role="controlgroup" bersama-sama dengan data-type="horizontal|vertical" untuk menentukan apakah kelompok centang horizontal atau vertikal.
collapsible
Sebuah elemen header diikuti oleh markup HTML di dalam sebuah wadah dengan data-role="collapsible" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-collapsed | true | false | Menentukan apakah konten harus ditutup atau diperluas |
| data-collapsed-cue-text | sometext | Menentukan beberapa teks untuk memberikan umpan balik terdengar bagi pengguna dengan perangkat lunak pembaca layar. Default adalah "klik runtuh isinya". |
| data-collapsed-icon | Icons Reference | Menentukan ikon tombol dilipat. Default adalah "plus" |
| data-content-theme | letter (a-z) | Menentukan warna tema konten dilipat. Akan juga menambahkan sudut dibulatkan ke konten dilipat |
| data-expanded-cue-text | sometext | Menentukan beberapa teks untuk memberikan umpan balik terdengar bagi pengguna dengan perangkat lunak pembaca layar. Default adalah "klik untuk memperluas isi". |
| data-expanded-icon | Icons Reference | Menentukan ikon tombol dilipat bila konten diperluas. Default adalah "minus" |
| data-iconpos | left | right | top | bottom | Menentukan posisi ikon |
| data-inset | true | false | Menentukan apakah tombol dilipat harus ditata dengan sudut membulat dan beberapa margin atau tidak |
| data-mini | true | false | Menentukan apakah tombol dilipat harus dari ukuran kecil atau biasa |
| data-theme | letter (a-z) | Menentukan warna tema tombol dilipat |
dilipat Set
Blok konten dilipat dalam sebuah wadah dengan data-role="collapsibleset" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-collapsed-icon | Icons Reference | Menentukan ikon tombol dilipat. Default adalah "plus" |
| data-content-theme | letter (a-z) | Menentukan warna tema konten dilipat |
| data-expanded-icon | Icons Reference | Menentukan ikon tombol dilipat bila konten diperluas. Default adalah "minus" |
| data-iconpos | left | right | top | bottom | notext | Menentukan posisi ikon |
| data-inset | true | false | Menentukan apakah collapsibles harus ditata dengan sudut membulat dan beberapa margin atau tidak |
| data-mini | true | false | Menentukan apakah tombol dilipat harus dari ukuran kecil atau biasa |
| data-theme | letter (a-z) | Menentukan warna tema set dilipat |
kadar
Usang dalam versi 1.4, dan akan dihapus dalam 1,5. Kontainer dengan data-role="content" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-theme | letter (a-z) | Menentukan warna tema konten |
Controlgroup
Sebuah <div> atau <fieldset> wadah dengan data-role="controlgroup" . Kelompok tombol bergaya beberapa masukan dari satu jenis (tombol berbasis link-, tombol radio, kotak centang, pilih elemen). Untuk mengelompokkan bentuk kotak centang dan tombol radio, yang <fieldset> kontainer dianjurkan di dalam <div> dengan "ui-fieldcontain" kelas, untuk meningkatkan label styling.
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-exclude-invisible | true | false | Menentukan apakah untuk mengecualikan anak-anak terlihat dalam tugas sudut dibulatkan |
| data-mini | true | false | Menentukan apakah kelompok harus dari ukuran kecil atau biasa |
| data-theme | letter (a-z) | Menentukan warna tema controlgroup yang |
| data-type | horizontal | vertical | Menentukan apakah kelompok harus horizontal atau vertikal ditampilkan |
Dialog
Sebuah wadah dengan data-dialog="true" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-close-btn | left | right | none | Menentukan posisi tombol tutup |
| data-close-btn-text | sometext | Menentukan teks untuk tombol tutup |
| data-corners | true | false | Menentukan apakah dialog harus memiliki sudut dibulatkan atau tidak |
| data-dom-cache | true | false | Menentukan apakah untuk menghapus jQuery DOM cache atau tidak untuk setiap halaman (jika diatur ke benar, Anda perlu berhati-hati untuk mengelola DOM sendiri dan uji menyeluruh pada semua perangkat mobile) |
| data-overlay-theme | letter (a-z) | Menentukan overlay (background) warna halaman dialog |
| data-theme | letter (a-z) | Menentukan warna tema halaman dialog |
| data-title | sometext | Menentukan judul untuk halaman dialog |
Peningkatan
Sebuah wadah dengan data-enhance="false" atau data-ajax="false"
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-enhance | true | false | Jika diatur ke "true" , (default) jQuery Mobile secara otomatis akan gaya halaman, sehingga cocok untuk perangkat mobile. Jika diatur ke "false", kerangka akan tidak gaya halaman |
| data-ajax | true | false | Menentukan apakah untuk memuat halaman melalui ajax atau tidak |
Catatan: data-enhance="false" harus digunakan bersama dengan $.mobile.ignoreContentEnabled=true" untuk menghentikan jQuery Mobile ke halaman gaya otomatis.
Link atau bentuk elemen dalam data-ajax="false" kontainer akan diabaikan oleh fungsi navigasi kerangka ketika $.mobile.ignoreContentEnabled diatur ke benar.
bidang Kontainer
Usang dalam versi 1.4, dan akan dihapus dalam 1,5. Gunakan class="ui-fieldcontain instead" . Sebuah wadah dengan data-role="fieldcontain" melilit label / bentuk pasangan elemen.
Toolbar tetap
Sebuah wadah dengan data-role="header" atau data-role="footer" bersama-sama dengan data-position="fixed" atribut.
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-disable-page-zoom | true | false | Menentukan apakah pengguna dapat skala / tampilannya halaman atau tidak |
| data-fullscreen | true | false | Menentukan toolbar untuk selalu diposisikan di bagian atas dan / atau bawah |
| data-tap-toggle | true | false | Menentukan apakah pengguna dapat beralih toolbar-visibilitas di keran / klik atau tidak |
| data-transition | slide | fade | none | Menentukan efek transisi ketika keran / klik terjadi |
| data-update-page-padding | true | false | Menentukan padding dari kedua atas dan bawah dari halaman yang akan diperbarui di resize, transisi dan "updatelayout" peristiwa (jQuery Mobile selalu update padding pada "pageshow" event) |
| data-visible-on-page-show | true | false | Menentukan toolbar-visibilitas ketika halaman induk ditampilkan |
Flip Beralih Beralih
Sebuah <input type="checkbox"> dengan data peran "flipswitch" :
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-mini | true | false | Menentukan apakah saklar harus dari ukuran kecil atau biasa |
| data-on-text | sometext | Menentukan "pada" teks pada saklar jepit (default adalah "On" ) |
| data-off-text | sometext | Menentukan "off" teks pada saklar jepit (default adalah "Off" ) |
Footer
Sebuah wadah dengan data-role="footer" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-id | sometext | Menentukan ID unik. Diperlukan untuk footer persisten |
| data-position | inline | fixed | Menentukan apakah footer harus inline dengan konten halaman atau tetap diposisikan di bagian bawah |
| data-fullscreen | true | false | Menentukan apakah footer harus selalu diposisikan di bagian bawah dan atas konten halaman (sedikit tembus) atau tidak |
| data-theme | letter (a-z) | Menentukan warna tema footer |
Catatan: Untuk mengaktifkan posisi fullscreen, penggunaan data-position="fixed" dan kemudian menambahkan data-fullscreen atribut elemen.
Header
Sebuah wadah dengan data-role="header" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-id | sometext | Menentukan ID unik. Diperlukan untuk header persisten |
| data-position | inline | fixed | Menentukan apakah header harus inline dengan konten halaman atau tetap diposisikan di atas |
| data-fullscreen | true | false | Menentukan apakah header harus selalu diposisikan di atas dan atas konten halaman (sedikit tembus) atau tidak |
| data-theme | letter (a-z) | Menentukan warna tema header |
Catatan: Untuk mengaktifkan posisi fullscreen, penggunaan data-position="fixed" dan kemudian menambahkan data-fullscreen atribut elemen.
input
Input dengan type="text|search|etc." Atau textarea elements .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-clear-btn | true | false | Menentukan apakah input harus memiliki "clear" tombol |
| data-clear-btn-text | text | Menentukan teks untuk tombol "jelas". Default adalah "clear text" |
| data-mini | true | false | Menentukan apakah input harus dari ukuran kecil atau biasa |
| data-role | none | Mencegah jQuery Mobile untuk gaya input / dihapus saja sebagai tombol |
| data-theme | letter (a-z) | Menentukan warna tema field input |
Link
Semua link.
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-ajax | true | false | Menentukan apakah untuk memuat halaman melalui ajax untuk pengalaman pengguna yang lebih baik dan transisi. Jika diatur ke false, jQuery Mobile akan melakukan permintaan halaman normal. |
| data-direction | reverse | Sebaliknya transisi animasi (hanya untuk halaman atau dialog) |
| data-dom-cache | true | false | Menentukan apakah untuk menghapus jQuery DOM cache atau tidak untuk setiap halaman (jika diatur ke benar, Anda perlu berhati-hati untuk mengelola DOM sendiri dan uji menyeluruh pada semua perangkat mobile) |
| data-prefetch | true | false | Menentukan apakah untuk prefetch halaman ke DOM sehingga mereka tersedia ketika pengguna mengunjungi mereka |
| data-rel | back | dialog | external | popup | Menentukan pilihan untuk bagaimana link harus bersikap. Kembali - Bergerak satu langkah mundur dalam sejarah. Dialog - Membuka link sebagai dialog, tidak dilacak dalam sejarah. Eksternal - Untuk menghubungkan ke domain lain. Popup - membuka jendela popup. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Menentukan bagaimana transisi dari satu halaman ke halaman berikutnya. Lihat kami jQuery Mobile Transisi bab. |
| data-position-to | origin | jQuery selector | window | Menentukan posisi kotak popup. Asal - default. Memposisikan popup atas link yang terbuka itu. jQuery pemilih - memposisikan popup atas elemen tertentu. Window - posisi popup di tengah layar jendela. |
Daftar
Sebuah <ol> atau <ul> dengan data-role="listview" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-autodividers | true | false | Menentukan apakah akan secara otomatis membagi item daftar atau tidak |
| data-count-theme | letter (a-z) | Menentukan warna tema gelembung count |
| data-divider-theme | letter (a-z) | Menentukan warna tema daftar pembagi |
| data-filter | true | false | Menentukan apakah untuk menambahkan kotak pencarian dalam daftar atau tidak |
| data-filter-placeholder | sometext | Usang dalam versi 1.4. Menggunakan atribut HTML placeholder sebagai gantinya. Menentukan teks di dalam kotak pencarian. Default adalah "Filter item ..." |
| data-filter-theme | letter (a-z) | Menentukan warna tema filter pencarian |
| data-icon | Icons Reference | Menentukan ikon dari daftar |
| data-inset | true | false | Menentukan apakah daftar harus ditata dengan sudut membulat dan beberapa margin atau tidak |
| data-split-icon | Icons Reference | Menentukan ikon tombol split. Default adalah "panah-r" |
| data-split-theme | letter (a-z) | Menentukan warna tema tombol perpecahan |
| data-theme | letter (a-z) | Menentukan warna tema daftar |
Daftar barang
Sebuah <li> dalam sebuah <ol> atau <ul> dengan data-role="listview" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-filtertext | sometext | Menentukan teks untuk mencari ketika menyaring elemen. Teks ini kemudian akan disaring bukan teks daftar item yang sebenarnya |
| data-icon | Icons Reference | Menentukan ikon dari item daftar |
| data-role | list-divider | Menentukan pembagi untuk daftar item |
| data-theme | letter (a-z) | Menentukan warna tema item daftar |
Catatan: Data-icon atribut hanya bekerja pada daftar item dengan link.
navbar
<li> elemen di dalam wadah dengan data-role="navbar" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-icon | Icons Reference | Menentukan ikon dari item daftar |
| data-iconpos | left | right | top | bottom | notext | Menentukan posisi ikon |
Navbars mewarisi tema-carikan dari wadah orang tua mereka. Hal ini tidak mungkin untuk mengatur data atribut-tema untuk navbar a. Atribut data tema dapat diatur secara individual untuk setiap link dalam navbar.
Halaman
Sebuah wadah dengan data-role="page" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-dom-cache | true | false | Menentukan apakah untuk menghapus jQuery DOM cache atau tidak untuk setiap halaman (jika diatur ke benar, Anda perlu berhati-hati untuk mengelola DOM sendiri dan uji menyeluruh pada semua perangkat mobile) |
| data-overlay-theme | letter (a-z) | Menentukan overlay (background) warna halaman dialog |
| data-theme | letter (a-z) | Menentukan tema warna halaman |
| data-title | sometext | Menentukan judul halaman |
| data-url | url | Nilai untuk memperbarui URL, bukan url yang digunakan untuk meminta halaman |
Muncul
Sebuah wadah dengan data-role="popup" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-corners | true | false | Menentukan apakah popup harus memiliki sudut dibulatkan atau tidak |
| data-dismissible | true | false | Menentukan apakah popup harus ditutup dengan mengklik di luar popup atau tidak |
| data-history | true | false | Menentukan apakah popup harus membuat item history browser ketika dibuka. Jika diatur ke false, itu tidak akan membuat item sejarah, dan kemudian tidak akan closeable melalui tombol "Kembali" browser |
| data-overlay-theme | letter (a-z) | Menentukan overlay (background) warna kotak popup. Default adalah latar belakang transparan (tidak ada). |
| data-shadow | true | false | Menentukan apakah kotak popup harus memiliki bayangan atau tidak |
| data-theme | letter (a-z) | Menentukan warna tema kotak popup. Default diwariskan, "none" set popup untuk transparan |
| data-tolerance | 30, 15, 30, 15 | Menentukan jarak dari tepi jendela ( top, right, bottom, left ) |
Jangkar dengan data-rel="popup" :
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Menentukan posisi kotak popup. Asal - default. Memposisikan popup atas link yang terbuka itu. jQuery pemilih - memposisikan popup atas elemen tertentu. Window - posisi popup di tengah layar jendela. |
| data-rel | popup | Untuk membuka kotak popup |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Menentukan bagaimana transisi dari satu halaman ke halaman berikutnya. Lihat kami jQuery Mobile Transisi bab. |
Tombol radio
Pasang label dan input dengan type="radio" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-mini | true | false | Menentukan apakah tombol harus ukuran kecil atau biasa |
| data-role | none | Mencegah jQuery Mobile untuk gaya radiobuttons sebagai tombol ditingkatkan |
| data-theme | letter (a-z) | Menentukan warna tema tombol radio |
Untuk tombol kelompok beberapa radio, menggunakan data-role="controlgroup" bersama-sama dengan data-type="horizontal|vertical" untuk menentukan apakah kelompok tombol horizontal atau vertikal.
Memilih
Semua <select> elemen.
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-icon | Icons Reference | Menentukan ikon dari elemen pilih. Default adalah "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Menentukan posisi ikon |
| data-inline | true | false | Menentukan apakah elemen pilih harus inline atau tidak |
| data-mini | true | false | Menentukan apakah pilih harus dari ukuran kecil atau biasa |
| data-native-menu | true | false | Bila diatur ke false, menggunakan pilih menu jQuery kustom sendiri (dianjurkan jika Anda ingin pilih menu untuk menampilkan yang sama pada semua perangkat mobile) |
| data-overlay-theme | letter (a-z) | Menentukan warna tema pilih menu kustom sendiri jQuery (digunakan bersama-sama dengan data-native-menu="false" ) |
| data-placeholder | true | false | Dapat diatur pada <option> unsur pilih non-pribumi |
| data-role | none | Mencegah jQuery Mobile untuk gaya pilih elemen sebagai tombol |
| data-theme | letter (a-z) | Menentukan warna tema elemen pilih |
Untuk beberapa kelompok memilih elemen, menggunakan data-role="controlgroup" bersama-sama dengan data-type="horizontal|vertical" untuk menentukan apakah kelompok elemen horizontal atau vertikal.
slider
Input dengan type="range" .
| Data-atribut | Nilai | Deskripsi |
|---|---|---|
| data-highlight | true | false | Menentukan apakah lagu slider harus disorot atau tidak |
| data-mini | true | false | Menentukan apakah slider harus dari ukuran kecil atau biasa |
| data-role | none | Mencegah jQuery Mobile untuk kontrol slider gaya sebagai tombol |
| data-theme | letter (a-z) | Menentukan warna tema kontrol slider (input, menangani dan melacak) |
| data-track-theme | letter (a-z) | Menentukan warna tema lagu slider |