jQuery Data Mudah Alih 属性
Harta Data jQuery
jQuery Mobile menggunakan atribut data-* HTML5 untuk mencipta penampilan yang lebih mesra sentuhan dan menarik untuk peranti mudah alih.
Dalam senarai rujukan di bawah, nilai yang ditunjukkan dalam huruf tebaladalah nilai lalai.
butang
Ditamatkan selepas versi 1.4. Gunakan kelas CSS sebaliknya. Hiperpautan dengan data-role="button". Elemen butang, pautan dalam bar alat dan medan input akan dipaparkan secara automatik ke dalam gaya butang tanpa menambah data-role="button".
| Harta data | nilai | huraikan |
|---|---|---|
| sudut data | benar | | Menentukan sama ada butang mempunyai bucu bulat |
| ikon data | Manual Rujukan Ikon | Menentukan ikon butang. Tiada ikon secara lalai. |
| data-iconpos | kiri |. atas bawah | | Menentukan lokasi ikon |
| data-iconshadow | benar | | Menentukan sama ada ikon butang mempunyai bayang-bayang |
| sebaris data | benar |. salah | Menentukan sama ada butang berada dalam baris |
| data-mini | benar |. salah | Menentukan sama ada butang itu kecil atau saiz biasa |
| bayangan-data | benar | | Menentukan sama ada butang mempunyai bayang |
| tema data | Surat (a-z) | Menentukan warna tema untuk butang |
|
|---|
|
|
如需组合多个按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合按钮。 |
|---|
kotak semak
Label dan input dipasangkan dengan type="checkbox". Ia dipaparkan secara automatik dengan gaya butang, dan peranan data tidak diperlukan.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定复选框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把复选框渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定复选框的主题颜色 |
|
如需组合多个复选框，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合复选框。 |
|---|
Blok boleh lipat
Elemen tajuk diikuti dengan mana-mana teg HTML di dalam bekas dengan data-role="collapsible".
| Harta data | nilai | huraikan |
|---|---|---|
| data-runtuh | benar | | Menentukan sama ada kandungan diruntuhkan atau dikembangkan |
| ikon data-runtuh | Manual Rujukan Ikon | Menentukan ikon untuk butang boleh lipat. Lalai ialah "tambah" |
| tema-kandungan data | Surat (a-z) | Menentukan warna tema untuk kandungan boleh lipat. Sama ada hendak menambah bucu bulat pada kandungan boleh lipat |
| ikon data-diperluaskan | Manual Rujukan Ikon | Menentukan ikon untuk butang boleh lipat apabila kandungan dikembangkan.Lalai ialah "tolak" |
| data-iconpos | kiri | | Menentukan lokasi ikon |
| sisipan data | benar | | Menentukan sama ada butang boleh lipat dipaparkan dengan bucu bulat dan jidar |
| data-mini | benar |. salah | Menentukan sama ada butang boleh lipat adalah kecil atau saiz biasa |
| tema data | Surat (a-z) | Menentukan warna tema untuk butang boleh lipat |
Koleksi boleh lipat
Blok kandungan boleh lipat di dalam bekas dengan data-role="collapsible-set".
| Harta data | nilai | huraikan |
|---|---|---|
| ikon data-runtuh | Manual Rujukan Ikon | Menentukan ikon untuk butang boleh lipat. Lalai ialah "tambah" |
| tema-kandungan data | Surat (a-z) | Menentukan warna tema untuk butang boleh lipat |
| ikon data-diperluaskan | Manual Rujukan Ikon | Menentukan ikon untuk butang boleh lipat apabila kandungan dikembangkan.Lalai ialah "tolak" |
| data-iconpos | kiri |. atas bawah | | Menentukan lokasi ikon |
| sisipan data | benar | | Menentukan sama ada blok boleh lipat dipaparkan dengan bucu bulat dan jidar |
| data-mini | benar |. salah | Menentukan sama ada butang boleh lipat adalah kecil atau saiz biasa |
| tema data | Surat (a-z) | Menentukan warna tema untuk koleksi boleh lipat |
kandungan
Ditamatkan dalam versi 1.4 dan tidak lagi disokong selepas versi 1.5. Bekas menggunakan data-role="content".
| Harta data | nilai | huraikan |
|---|
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-theme | 字母 (a-z) | 规定内容的主题颜色。 |
kumpulan kawalan
Bekas <div> atau <fieldset> dengan data-role="controlgroup". Menggabungkan berbilang input gaya butang bagi satu jenis (butang berasaskan pautan, butang radio, kotak semak, elemen pilih). Untuk kotak pilihan bentuk gabungan dan butang radio, adalah disyorkan untuk menggunakan <set medan> di dalam <div> dengan data-role="fieldcontain" untuk memperbaik gaya label.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定控件组是小尺寸还是常规尺寸 |
| data-type | horizontal | vertical | 规定控件组是水平显示还是垂直显示 |
kotak dialog
Bekas dengan data-role="dialog" atau pautan dengan data-rel="dialog".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-close-btn-text | sometext | 规定对话框关闭按钮的文本 |
| data-dom-cache | true | false | 规定是否清除各个页面的 jQuery DOM 缓存（如果设置为 true，您必须自己管理 DOM 并在所有移动设备上进行测试） |
| data-overlay-theme | 字母 (a-z) | 规定对话框页面的蒙版（背景）颜色 |
| data-theme | 字母 (a-z) | 规定对话框页面的主题颜色 |
| data-title | sometext | 规定对话框页面的标题 |
Tingkatkan
Bekas dengan data-enhance="false" atau data-ajax="false".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-enhance | true | false | 如果设置为 "true"（默认），jQuery Mobile 会自动渲染页面，使其更适合于移动设备。如果设置为 "false"，框架将不会渲染页面 |
| data-ajax | true | false | 规定是否通过 ajax 加载页面 |
Nota: data-enhance="false" mesti digunakan dengan $.mobile.ignoreContentEnabled=true" untuk menghalang jQuery Mobile daripada memaparkan halaman secara automatik.
Apabila $.mobile.ignoreContentEnabled ditetapkan kepada benar, sebarang pautan atau elemen borang dalam bekas data-ajax="false" akan diabaikan oleh fungsi navigasi bingkai.
bekas domain
Ditamatkan selepas versi 1.4 dan tidak lagi disokong selepas versi 1.5, class="ui-fieldcontain akan digunakan sebaliknya". Bekas yang dibalut dalam pasangan elemen label/bentuk dengan data-role="fieldcontain".
Bar alat tetap
Bekas dengan data-role="header" atau data-role="footer" dan dengan atribut data-position="fixed".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-disable-page-zoom | true | false | 规定用户是否能缩放页面 |
| data-fullscreen | true | false | 规定工具栏是否一直固定在顶部或底部 |
| data-tap-toggle | true | false | 规定用户是否能够通过点击改变工具栏的可见性 |
| data-transition | slide | fade | none | 规定当点击发生时的切换效果 |
| data-update-page-padding | true | false | 规定页面顶部和底部的内边距是否在 resize、transition 和 "updatelayout" 事件发生时更新（jQuery Mobile 在 "pageshow" 事件发生时总是更新内边距） |
| data-visible-on-page-show | true | false | 规定当父页面显示时工具栏的可见性 |
suis togol flip
Elemen <pilih> dengan data-role="slider" dan dua elemen <option>
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定开关是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把拨动开关渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定拨动开关的主题颜色 |
| data-track-theme | 字母 (a-z) | 规定轨道的主题颜色 |
bar ekor
Bekas dengan data-role="footer".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-id | sometext | 规定唯一 ID。对于持续的尾部栏是必需的 |
| data-position | inline | fixed | 规定尾部栏是与页面内容内联还是保持固定在底部 |
| data-fullscreen | true | false | 规定尾部栏是固定在底部还是覆盖在页面内容上（查看范围更大） |
| data-theme | 字母 (a-z) | 规定尾部栏的主题颜色。默认是 "a" |
Nota: Untuk mendayakan kedudukan skrin penuh, gunakan data-position="fixed" dan kemudian tambahkan atribut data-screen penuh pada elemen.
bar pengepala
Bekas dengan data-role="header".
| Harta data | nilai | huraikan | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| data-id | sesuatu teks | Menentukan ID unik. Diperlukan untuk bar pengepala berterusan | |||||||||||||||
| kedudukan data |
|
Menentukan sama ada bar pengepala harus selaras dengan kandungan halaman atau kekal tetap di bahagian atas | |||||||||||||||
| skrin penuh data | benar |. <🎜>salah<🎜> | Menentukan sama ada bar pengepala ditetapkan di bahagian atas atau meliputi kandungan halaman (julat tontonan yang lebih luas) | |||||||||||||||
| tema data | Huruf (a-z) | Menentukan warna tema bar pengepala. Lalai ialah "a" |
Nota: Untuk mendayakan kedudukan skrin penuh, gunakan data-position="fixed" dan kemudian tambahkan atribut data-screen penuh pada elemen.
Pautan
Semua pautan, termasuk pautan dengan data-role="button" dan butang hantar borang.
| Harta data | nilai | huraikan |
|---|---|---|
| data-ajax | benar | | Menentukan sama ada untuk memuatkan halaman melalui ajax untuk meningkatkan pengalaman dan interaksi pengguna. Jika ditetapkan kepada palsu, jQuery Mobile akan melaksanakan permintaan halaman biasa. |
| arah data | terbalik | Animasi peralihan terbalik (hanya untuk halaman dan kotak dialog) |
| data-dom-cache | benar |. salah | Menentukan sama ada untuk mengosongkan cache DOM jQuery untuk halaman individu (jika ditetapkan kepada benar, anda mesti mengurus DOM sendiri dan menguji pada semua peranti mudah alih) |
| data-prefetch | benar |. salah | Menentukan sama ada untuk prabaca halaman ke dalam DOM supaya ia tersedia apabila pengguna mengaksesnya |
| data-rel | kembali |. dialog luar | | Pilihan yang menentukan tingkah laku pautan. Kembali - Kembali ke halaman sebelumnya dalam sejarah. Dialog - Buka pautan sebagai kotak dialog tanpa menyimpannya ke sejarah. Luaran - digunakan untuk memaut ke domain lain. Popup - Membuka tetingkap pop timbul. |
| peralihan data | memudar | tiada | Menentukan kesan beralih dari satu halaman ke halaman seterusnya.Lihat bab Penukaran Halaman Mudah Alih jQuery kami. |
| kedudukan-data-ke | asal tetingkap pemilih jQuery | | Menentukan kedudukan kotak pop timbul. Asal - Lalai. Letakkan pop timbul pada pautan yang membukanya. Pemilih jQuery - Letakkan tetingkap pop timbul pada elemen yang ditentukan. Tetingkap - Letakkan pop timbul di tengah skrin tetingkap. |
senarai
<ol> atau <ul> dengan data-role="listview".
| Harta data | nilai | huraikan |
|---|---|---|
| pembahagi-autobahagi data | benar |. salah | Menentukan sama ada untuk membahagikan item senarai secara automatik |
| data-count-theme | Surat (a-z) | Menentukan warna tema untuk mengira buih. |
| tema-pembahagi-data | Surat (a-z) | Menentukan warna tema untuk pemisah senarai. |
| penapis data | benar |. salah | Menentukan sama ada untuk menambah kotak carian pada senarai |
| pemegang tempat penapis data | sesuatu teks | Ditinggalkan selepas versi 1.4. Gunakan atribut pemegang tempat HTML sebaliknya. Menentukan teks dalam kotak carian. Lalai ialah "Tapis item..." |
| tema-penapis data | Surat (a-z) | Menentukan warna tema untuk penapisan carian. |
| ikon data | Manual Rujukan Ikon | Tentukan ikon senarai |
| sisipan data | benar |. salah | Menentukan sama ada senarai dipaparkan dengan bucu bulat dan jidar |
| ikon pemisahan data | Manual Rujukan Ikon | Menentukan carta untuk butang belah. Lalai ialah "arrow-r" |
| data-split-theme | Surat (a-z) | Menentukan warna tema untuk butang belah. |
| tema data | Surat (a-z) | Menentukan warna tema untuk senarai |
item senarai
<ol> dengan data-role="listview" atau <li>
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-filtertext | sometext | 规定当过滤元素时要搜索的文本。该文本将会被过滤，而不是实际的列表项文本 |
| data-icon | 图标参考手册 | 规定列表项图标 |
| data-role | list-divider | 规定列表项的分隔 |
| data-theme | 字母 (a-z) | 规定列表项的主题颜色 |
Nota: Atribut ikon data hanya berfungsi pada item senarai dengan pautan.
Bar navigasi
Elemen <li> di dalam bekas data-role="navbar".
| Harta data | nilai | huraikan | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ikon data | Manual Rujukan Ikon | Menentukan ikon untuk item senarai | ||||||||||||||||||||||||||||||
| data-iconpos |
kiri |. kanan |.
| |
Menentukan lokasi ikon |
|
导航栏从他们的父容器中继承了主题样本。为导航栏设置 data-theme 属性是不可能的。可以为导航栏中的每个链接单独设置 data-theme 属性。 |
|---|
muka surat
Bekas dengan data-role="page".
| Harta data | nilai | huraikan |
|---|---|---|
| data-add-back-btn | benar |. salah | Tambah butang belakang secara automatik, bar pengepala sahaja |
| data-back-btn-text | sesuatu teks | Menentukan beberapa teks untuk butang belakang |
| data-back-btn-theme | Surat (a-z) | Menentukan warna tema untuk butang belakang |
| data-close-btn-text | Surat (a-z) | Menentukan beberapa teks untuk butang tutup pada kotak dialog |
| data-dom-cache | benar |. salah | Menentukan sama ada untuk mengosongkan cache DOM jQuery untuk halaman individu (jika ditetapkan kepada benar, anda mesti mengurus DOM sendiri dan menguji pada semua peranti mudah alih) |
| tema-tindih-data | Surat (a-z) | Menentukan warna topeng (latar belakang) halaman dialog |
| tema data | Surat (a-z) | Menentukan warna tema halaman. |
| tajuk data | sesuatu teks | Nyatakan tajuk halaman |
| url data | url | Kemas kini nilai URL selain daripada URL yang digunakan untuk meminta halaman |
Tetingkap timbul
Bekas dengan data-role="popup".
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-corners | true | false | 规定弹窗是否圆角 |
| data-overlay-theme | 字母 (a-z) | 规定弹出框的蒙版（背景）颜色。默认是透明背景（无） |
| data-shadow | true | false | 规定弹出框是否有阴影 |
| data-theme | 字母 (a-z) | 规定弹出框的主题颜色。默认是继承的，"none" 设置弹窗为透明的 |
| data-tolerance | 30, 15, 30, 15 | 规定窗口边缘（上 top、右 right、下 bottom、左 left）的距离 |
Sauh dengan data-rel="popup":
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-position-to | origin | jQuery selector | window | >规定弹出框的位置。Origin - 默认。定位弹窗在打开它的链接上。jQuery selector - 定位弹窗在指定元素上。Window - 定位弹窗在窗口屏幕的中央。 |
| data-rel | popup | 用于打开弹出框 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | 规定一个页面切换到下一个页面的效果。请查看我们的 jQuery Mobile 页面切换章节。 |
butang radio
Label dan input dipasangkan dengan type="radio". Ia dipaparkan secara automatik dengan gaya butang, dan peranan data tidak diperlukan.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定按钮是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染单选按钮的样式为增强状态的按钮，使元素以 HTML 原生的状态显示 |
| data-theme | 字母 (a-z) | 规定单选按钮的主题颜色 |
|
|
如需组合多个单选按钮，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合单选按钮。 |
|---|
pilih
Semua elemen <select>. Ini akan dipaparkan secara automatik sebagai gaya butang, peranan tarikh tidak diperlukan.
| Harta data | nilai | huraikan |
|---|---|---|
| ikon data | Manual Rujukan Ikon | Menentukan ikon untuk elemen pilih.Lalai ialah "anak panah-d" |
| data-iconpos | kiri |. kanan | | Menentukan lokasi ikon |
| sebaris data | benar |. salah | Menentukan sama ada elemen pilih adalah sebaris |
| data-mini | benar |. salah | Menentukan sama ada elemen pilih adalah saiz kecil atau biasa |
| data-native-menu | benar | | Apabila ditetapkan kepada palsu, ia menggunakan menu pemilihan tersuai yang disertakan dengan jQuery (disyorkan jika anda mahu menu pemilihan kelihatan sama pada semua peranti mudah alih) |
| tema-tindih-data | Surat (a-z) | Menentukan warna tema menu pilihan tersuai yang disertakan dengan jQuery (digunakan dengan data-native-menu="false") |
| pemegang tempat data | benar |. salah | Boleh ditetapkan pada <opsyen> elemen menu pilihan bukan asli |
| peranan data | tiada | Halang jQuery Mobile daripada memaparkan elemen terpilih ke dalam gaya butang |
| tema data | Surat (a-z) | Menentukan warna tema elemen pilih |
|
|
|---|
|
|
如需组合多个 select 元素，请使用带有 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 的容器来规定是否水平或垂直组合 select 元素。 |
|---|
peluncur
Kotak input dengan type="julat". Ini akan dipaparkan secara automatik sebagai gaya butang, peranan tarikh tidak diperlukan.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-highlight | true | false | 规定滑动轨道是否高亮突出显示 |
| data-mini | true | false | 规定滑动块是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 渲染滑动块控件为按钮样式 |
| data-theme | 字母 (a-z) | 规定滑动块控件（输入框、手柄和轨道）的主题颜色 |
| data-track-theme | 字母 (a-z) | 规定滑动块轨道的主题颜色 |
Kotak input teks & medan input teks
Input atau elemen textarea dengan type="text|search|dll.". Ini akan dipaparkan secara automatik sebagai gaya butang, peranan tarikh tidak diperlukan.
| Data-属性 | 值 | 描述 |
|---|---|---|
| data-mini | true | false | 规定输入框是小尺寸还是常规尺寸 |
| data-role | none | 防止 jQuery Mobile 把输入框/输入域渲染成按钮样式 |
| data-theme | 字母 (a-z) | 规定输入字段的主题颜色 |
