Atрибut Data jQuery Mobile

Atribut Data jQuery

jQuery Mobile menggunakan atribut HTML5 data-* untuk menciptakan tampilan yang indah dan 'ramah sentuh' untuk perangkat siap mobil.

Dalam daftar referensi di bawah, nilai tebal menentukan nilai standar.

Button

Hyperlink dengan atribut data-role="button". Elemen tombol dalam toolbar serta tautan dan bidang input akan disetel otomatis gaya tombol, tanpa data-role="button".

Data Attribut Nilai Deskripsi
data-corners true | false Tentukan apakah tombol memiliki rounding.
data-icon Referensi Ikon Tentukan ikon tombol. Standar tanpa ikon.
data-iconpos kiri | kanan | atas | bawah | tanpa teks Tetapkan posisi ikon.
data-iconshadow true | false Tentukan apakah ikon tombol memiliki bayangan.
data-inline true | false Tentukan apakah tombol adalah dalam baris.
data-mini true | false Tentukan apakah tombol adalah ukuran kecil atau ukuran biasa.
data-shadow true | false Tentukan apakah tombol memiliki bayangan.
data-theme letter (a-z) Tentukan warna tema tombol.

Petunjuk:Jika untuk menggabungkan beberapa tombol, gunakan wadah yang memiliki atribut data-role="controlgroup" serta data-type="horizontal|vertical" untuk menentukan penggabungan tombol secara horizontal atau vertical.

Checkbox

label 和 type="checkbox" 的 input 是成对的。会被自动设置为按钮的样式，无需 'data-role'。

Data Attribut Nilai Deskripsi
data-mini true | false 规定复选框是小型的还是常规尺寸的。
data-role none 防止 jQuery Mobile 将复选框设置为按钮的样式。
data-theme letter (a-z) 规定复选框的主题颜色。

Petunjuk:要组合多个复选框，请使用 'data-role="controlgroup"' 以及 'data-type="horizontal|vertical"'，来规定水平还是垂直组合复选框。

可折叠

标题元素，其后是位于带有 'data-role="collapsible"' 属性的容器中的任意 HTML 标记。

Data Attribut Nilai Deskripsi
data-collapsed true | false 规定内容是否应该关闭或展开。
data-collapsed-icon Referensi Ikon 规定可折叠按钮的图标。默认是 'plus'。
data-content-theme letter (a-z) 规定可折叠内容的主题颜色。同时会向可折叠内容添加圆角。
data-expanded-icon Referensi Ikon 规定内容展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos 左 | 右 | 上 | 下 Tetapkan posisi ikon.
data-inset true | false 规定可折叠按钮是否具有圆角和外边距的样式。
data-mini true | false 规定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 规定可折叠按钮的主题颜色。

可折叠集

带有 'data-role="collapsible-set"' 属性的容器中的可折叠内容块。

Data Attribut Nilai Deskripsi
data-collapsed-icon Referensi Ikon 规定可折叠按钮的图标。默认是“加号”。
data-content-theme letter (a-z) 规定可折叠内容的主题颜色。
data-expanded-icon Referensi Ikon 规定内容展开时的可折叠按钮的图标。默认是“减号”。
data-iconpos kiri | kanan | atas | bawah | tanpa teks Tetapkan posisi ikon.
data-inset true | false 规定可折叠是否具有圆角和外边距的样式。
data-mini true | false 规定可折叠按钮是小型的还是常规尺寸的。
data-theme letter (a-z) 规定可折叠集合的主题颜色。

内容

带有 'data-role="content"' 属性的容器。

Data Attribut Nilai Deskripsi
data-theme letter (a-z) 规定内容的主题颜色。默认是 'c'。

控制组

带有 'data-role="controlgroup"' 属性的 <div> 或 <fieldset> 容器。组合多个按钮样式的单一类型 input（基于链接的按钮、单选按钮、复选框、选择菜单）。

Data Attribut Nilai Deskripsi
data-mini true | false 规定组合是小型的还是常规尺寸的。
data-type 水平 | 垂直 规定组合是水平还是垂直显示。

对话框

容器具有 'data-role="dialog"' 属性或链接具有 'data-rel="dialog"' 属性。

Data Attribut Nilai Deskripsi
data-close-btn-text sometext Tetapkan teks butang tutup bincang yang digunakan sahaja.
data-dom-cache true | false Tetapkan sama ada halaman individu akan menghapuskan cache DOM jQuery (jika diatur kepada true, perhatikan pengurusan DOM, dan uji keseluruhan semua peranti siaran).
data-overlay-theme letter (a-z) Tentukan warna latar belakang halaman dialog.
data-theme letter (a-z) Tetapkan warna tema halaman bincang.
data-title sometext Tetapkan tajuk halaman bincang.

Enhancement

Kandungan yang mempunyai atribut data-enhance="false" atau data-ajax="false".

Data Attribut Nilai Deskripsi
data-enhance true | false Jika diatur kepada "true" (default), jQuery Mobile akan menambahkan gaya halaman secara automatik untuk memastikan ia lebih sesuai dengan peranti siaran. Jika diatur kepada "false", rangkaian tidak akan mengatur gaya halaman.
data-ajax true | false Tetapkan sama ada halaman akan dimuat melalui AJAX.

Keterangan:data-enhance="false" seperti digunakan bersamaan dengan $.mobile.ignoreContentEnabled=true" untuk menghalang jQuery Mobile menambahkan gaya halaman secara automatik.

Semasa $.mobile.ignoreContentEnabled diatur kepada true, mana-mana pautan atau elemen borang di dalam kandungan data-ajax="false" akan diabaikan oleh fungsi navigasi rangkaian.

Fieldcontainer

Kandungan yang mempunyai data-role="fieldcontain" untuk label/form.

Fixed Toolbar

Kandungan yang mempunyai atribut data-role="header" atau data-role="footer" serta atribut data-position="fixed".

Data Attribut Nilai Deskripsi
data-disable-page-zoom true | false Tetapkan sama ada pengguna boleh mengukur halaman.
data-fullscreen true | false Tetapkan sama ada papan alat sentiasa berada di atas serta/atau bawah.
data-tap-toggle true | false Tetapkan sama ada pengguna boleh mengubah kenal pasti sambutan papan alat melalui menekan/klik.
data-transition slide | fade | none Tetapkan kesan transisi semasa menekan/klik.
data-update-page-padding true | false Tetapkan untuk mengubah jarak atas, bawah dan sisi halaman semasa terjadi perubahan saiz, transisi serta 'updatelayout' peristiwa (jQuery Mobile selalu mengubah jarak dalam masa peristiwa 'pageshow').
data-visible-on-page-show true | false Tetapkan kenal pasti sambutan papan alat yang dapat dilihat semasa halaman induk ditunjuk.

Pindah Tukar Beralih Flip

Satu elemen <select> dengan atribut data-role="slider" dan dua elemen <option>.

Data Attribut Nilai Deskripsi
data-mini true | false Tentukan sama ada pindah tukar adalah kecil atau saiz biasa.
data-role none Hentikan jQuery Mobile daripada menetapkan pindah tukar sebagai gaya butang.
data-theme letter (a-z) Tentukan warna tema pindah tukar.
data-track-theme letter (a-z) Tentukan warna tema lorong.

Footer

Kontainer dengan atribut data-role="footer".

Data Attribut Nilai Deskripsi
data-id sometext Tentukan ID unik. Diperlukan untuk kaki halaman persistent.
data-position baris | tetap Tentukan sama ada kaki halaman seharusnya berhubungan dengan kandungan halaman secara baris, atau disimpan di bawah.
data-fullscreen true | false Tentukan sama ada kaki halaman seharusnya selalu berada di bawah dan menutupi kandungan halaman (sedikit keluaran).
data-theme letter (a-z) Tentukan warna tema kaki halaman. Lalai adalah "a".

Keterangan:Untuk membolehkan lokasi penuh skrin, gunakan data-position="tetap" dan tambahkan atribut data-fullscreen ke elemen itu.

Header

Kontainer dengan data-role="header".

Data Attribut Nilai Deskripsi
data-id sometext Tentukan ID unik. Diperlukan untuk bawah bar persistent.
data-position baris | tetap Tentukan sama ada bawah bar seharusnya berhubungan dengan kandungan halaman secara baris, atau disimpan di atas.
data-fullscreen true | false Tentukan sama ada halaman seharusnya selalu berada di atas dan menutupi kandungan halaman (sedikit keluaran).
data-theme letter (a-z) Tentukan warna tema bawah bar. Lalai adalah "a".

Keterangan:Untuk membolehkan lokasi penuh skrin, gunakan data-position="tetap" dan tambahkan atribut data-fullscreen ke elemen itu.

Link

Semua link, termasuk link dengan data-role="button" serta butang penghantaran borang.

Data Attribut Nilai Deskripsi
data-ajax true | false Tentukan sama ada halaman seharusnya dimuat melalui AJAX untuk meningkatkan pengalaman pengguna dan transisi. Jika diatur kepada false, jQuery Mobile akan melakukan permintaan halaman biasa.
data-direction balik Balikkan animasi transisi (hanya untuk halaman atau dialog)
data-dom-cache true | false Tentukan apakah menghapus DOM cache halaman individu (jika diatur true, Anda perlu mengejar manajemen DOM, dan tes secara menyeluruh semua perangkat bergerak).
data-prefetch true | false Tentukan sama ada halaman seharusnya diprefetch ke DOM, supaya ia dapat digunakan semasa diakses pengguna.
data-rel kembali | dialog | luaran | keluaran Tentukan pilihan tentang cara pengelakuan link. Kembali - Bergerak ke belakang dalam sejarah. Dialog - Buka halaman sebagai dialog, tidak dicatat dalam sejarah. Luaran - Berhubung ke domain lain. Buka - Buka tetingkap keluar.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Tentukan bagaimana transisi dari halaman ke halaman berikutnya. Lihat transisi jQuery Mobile.
data-position-to origin | jQuery selector | window Tentukan posisi kotak dialog. Asal - Default. Menyemak link padam kepadan semasa di buka. Pemilih jQuery - Muncul di elemen yang ditentukan. Window - Muncul di tengah layar jendela.

List

Elemen <ol> atau <ul> dengan atribut data-role="listview".

Data Attribut Nilai Deskripsi
data-autodividers true | false Tetapkan apakah item daftar harus dipisahkan secara otomatis.
data-count-theme letter (a-z) Tetapkan warna tema benda angka. Standar adalah "c".
data-divider-theme letter (a-z) Tetapkan warna tema pemisah daftar. Standar adalah "b".
data-filter true | false Tetapkan apakah kotak pencarian harus ditambahkan ke daftar.
data-filter-placeholder sometext Tetapkan teks di kotak pencarian. Standar adalah "Filter items...".
data-filter-theme letter (a-z) Tetapkan warna tema program penapisan pencarian. Standar adalah "c".
data-icon Referensi Ikon Tetapkan ikon daftar.
data-inset true | false Tetapkan apakah daftar harus ditambahkan gaya rounding dan margin.
data-split-icon Referensi Ikon Tetapkan ikon tombol pemisah. Standar adalah "arrow-r".
data-split-theme letter (a-z) Tetapkan warna tema tombol pemisah. Standar adalah "b".
data-theme letter (a-z) Tetapkan warna tema daftar.

Item daftar

Elemen <li> di dalam <ol> atau <ul> dengan atribut data-role="listview".

Data Attribut Nilai Deskripsi
data-filtertext sometext Tetapkan teks yang dicari saat mengurangi elemen. Teks ini bukan teks item daftar yang sebenarnya yang akan dicari.
data-icon Referensi Ikon Tetapkan ikon item daftar.
data-role list-divider Tetapkan penanda pemisah daftar.
data-theme letter (a-z) Tetapkan warna tema item daftar.

Keterangan:Atribut data-icon hanya berlaku untuk item daftar yang mengandung tautan.

Navbar

Elemen <li> di dalam kontainer dengan atribut data-role="navbar".

Data Attribut Nilai Deskripsi
data-icon Referensi Ikon Tetapkan ikon item daftar.
data-iconpos kiri | kanan | atas | bawah | tanpa teks Tetapkan posisi ikon.

Petunjuk:Barangay navigasi mewarisi theme-swatch dari kontainer induk. Tidak mungkin untuk menetapkan atribut data-theme ke navigasi. Atribut data-theme dapat ditetapkan secara terpisah ke setiap tautan di navbar.

Page

Kontainer dengan atribut data-role="page".

Data Attribut Nilai Deskripsi
data-add-back-btn true | false Tambah butang kebalikan secara automatik, hanya untuk header halaman.
data-back-btn-text sometext Tetapkan teks butang kebalikan.
data-back-btn-theme letter (a-z) Tetapkan warna tema butang kebalikan.
data-close-btn-text letter (a-z) Tetapkan teks butang tutup di dialog.
data-dom-cache true | false Tentukan apakah menghapus DOM cache halaman individu (jika diatur true, Anda perlu mengejar manajemen DOM, dan tes secara menyeluruh semua perangkat bergerak).
data-overlay-theme letter (a-z) Tentukan warna latar belakang halaman dialog.
data-theme letter (a-z) Tentukan warna tema halaman. Standar adalah "c".
data-title sometext Tentukan judul halaman.
data-url url Nilai ini digunakan untuk memperbarui URL, bukan untuk meminta halaman.

Popup

Kontainer dengan atribut data-role="popup".

Data Attribut Nilai Deskripsi
data-corners true | false Tentukan apakah kotak dialog memiliki sudut rounded.
data-overlay-theme letter (a-z) Tentukan warna latar belakang kotak dialog. Standar adalah latar belakang transparan (none).
data-shadow true | false Tentukan apakah kotak dialog memiliki bayangan.
data-theme letter (a-z) Tentukan warna tema kotak dialog. Standar adalah warisan, "none" diatur untuk transparan.
data-tolerance 30, 15, 30, 15 Tentukan jarak dari ujung layar jendela (top, right, bottom, left).

Anchor dengan atribut data-rel="popup".

Data Attribut Nilai Deskripsi
data-position-to origin | jQuery selector | window Tentukan posisi kotak dialog. Origin - standar. Kotak dialog berada di link yang membuka kotak dialog. jQuery selector - kotak dialog berada di elemen yang ditentukan. Window - kotak dialog berada di tengah layar jendela.
data-rel popup Untuk membuka kotak dialog.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Tentukan bagaimana transisi dari halaman ke halaman berikutnya. Lihat transisi jQuery Mobile.

Tombol Pilihan Radio

label yang berhubungan dengan input yang mempunyai type="radio" akan diset ke gaya tombol secara otomatis, tanpa data-role.

Data Attribut Nilai Deskripsi
data-mini true | false Tentukan apakah tombol kecil atau ukuran biasa.
data-role none Tempatkan jQuery Mobile untuk menata tombol pilihan tunggal sebagai gaya tombol yang ditingkatkan.
data-theme letter (a-z) Tentukan warna tema tombol pilihan tunggal.

Petunjuk:Jika ingin menggabungkan beberapa tombol pilihan tunggal, gunakan data-role="controlgroup" serta data-type="horizontal|vertical" untuk menentukan penggabungan tombol secara horizontal atau vertical.

Select

Semua elemen <select>. Akan disesuaikan gaya tombol, tanpa perlu date-role.

Data Attribut Nilai Deskripsi
data-icon Referensi Ikon Tetapkan ikon elemen select. Default adalah "arrow-d".
data-iconpos kiri | kanan | atas | bawah | tanpa teks Tetapkan posisi ikon.
data-inline true | false Tetapkan apakah elemen select mengikuti baris.
data-mini true | false Tetapkan apakah elemen select kecil atau ukuran biasa.
data-native-menu true | false Jika diatur menjadi false, maka digunakan pilihan pilihan custom jQuery sendiri (jika Anda ingin pilihan menu memiliki penampilan yang konsisten di semua perangkat bergerak, maka disarankan digunakan).
data-overlay-theme letter (a-z) Tetapkan warna tema pilihan jQuery yang disesuaikan (diseimbangkan dengan data-native-menu="false").
data-placeholder true | false Dapat diset di elemen <option> select yang bukan asli.
data-role none Tempatkan jQuery Mobile untuk menata gaya tombol elemen select.
data-theme letter (a-z) Tetapkan warna tema elemen select.

Petunjuk:Untuk menggabungkan beberapa elemen select, gunakan data-role="controlgroup" serta data-type="horizontal|vertical" untuk menentukan penggabungan secara horizontal atau vertikal.

Slider

input elemen yang type="range" akan disesuaikan gaya tombol, tanpa perlu data-role.

Data Attribut Nilai Deskripsi
data-highlight true | false Tetapkan apakah jalur slider akan disorot.
data-mini true | false Tetapkan apakah slider kecil atau ukuran biasa.
data-role none Tempatkan jQuery Mobile untuk menata gaya tombol pengaturan slider.
data-theme letter (a-z) Tetapkan warna tema kontrol slider (input, handle dan jalur).
data-track-theme letter (a-z) Tetapkan warna tema jalur slider.

Input Teks &Textarea

input elemen atau textarea elemen yang type="text|search|etc." akan disesuaikan gaya, tanpa perlu data-role.

Data Attribut Nilai Deskripsi
data-mini true | false Tentukan apakah elemen input adalah ukuran kecil atau biasa.
data-role none Letakkan jQuery Mobile untuk mengatur gaya tombol input/textarea.
data-theme letter (a-z) Tentukan warna tema untuk bidang input.