Forum | tutorial pengembangan web terbaru
 

jQuery Mobile Atribut Data


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-inlinetrue | false Menentukan apakah tombol harus inline atau tidak
data-minitrue | 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-minitrue | false Menentukan apakah kotak centang harus dari ukuran kecil atau biasa
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | false Menentukan apakah kelompok harus dari ukuran kecil atau biasa
data-theme letter (a-z) Menentukan warna tema controlgroup yang
data-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | false Menentukan apakah input harus memiliki "clear" tombol
data-clear-btn-text text Menentukan teks untuk tombol "jelas". Default adalah "clear text"
data-minitrue | false Menentukan apakah input harus dari ukuran kecil atau biasa
data-rolenone 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-directionreverse Sebaliknya transisi animasi (hanya untuk halaman atau dialog)
data-dom-cachetrue | 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-prefetchtrue | false Menentukan apakah untuk prefetch halaman ke DOM sehingga mereka tersedia ketika pengguna mengunjungi mereka
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Untuk membuka kotak popup
data-transitionfade | 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-minitrue | false Menentukan apakah tombol harus ukuran kecil atau biasa
data-rolenone 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-iconposleft | right | top | bottom | notext Menentukan posisi ikon
data-inlinetrue | false Menentukan apakah elemen pilih harus inline atau tidak
data-minitrue | 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-placeholdertrue | false Dapat diatur pada <option> unsur pilih non-pribumi
data-rolenone 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-highlighttrue | false Menentukan apakah lagu slider harus disorot atau tidak
data-minitrue | false Menentukan apakah slider harus dari ukuran kecil atau biasa
data-rolenone 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