Atribut Data jQuery Mobile

Atribut Data jQuery

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

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

Button

Hyperlink dengan atribut data-role="button". Element tombol di toolbar serta tautan dan field input akan disetting gaya tombol otomatis, tanpa data-role="button".

Atribut Data Nilai Deskripsi
data-corners true | false Tentukan apakah tombol memiliki sudut rounded.
data-icon Referensi Icons Tentukan ikon tombol. Defaultnya tanpa ikon.
data-iconpos kiri | kanan | atas | bawah | notext Tentukan posisi ikon.
data-iconshadow true | false Tentukan apakah ikon tombol memiliki bayangan.
data-inline true | false Tentukan apakah tombol berada di dalam baris.
data-mini true | false Tentukan apakah tombol berukuran kecil atau ukuran biasa.
data-shadow true | false Tentukan apakah tombol memiliki bayangan.
data-theme letter (a-z) Tentukan warna tema tombol.

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

Checkbox

Label dan input dengan type="checkbox" adalah pasangan. Akan otomatis dijadikan gaya tombol, tanpa memerlukan data-role.

Atribut Data Nilai Deskripsi
data-mini true | false Tentukan apakah kotak centang adalah ukuran kecil atau ukuran biasa.
data-role none Perhatikan agar jQuery Mobile tidak menjadikan kotak centang berupa gaya tombol.
data-theme letter (a-z) Tentukan warna tema kotak centang.

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

Collapsible

Elemen judul, diikuti dengan sembarang tanda HTML yang berada di dalam kontainer yang mempunyai atribut data-role="collapsible".

Atribut Data Nilai Deskripsi
data-collapsed true | false Tentukan apakah konten harus ditutup atau diubah ke mode terbuka.
data-collapsed-icon Referensi Icons Tentukan ikon tombol penggabungan. Default adalah "plus".
data-content-theme letter (a-z) Tentukan warna tema konten penggabungan. Juga menambahkan rounded corner ke konten penggabungan.
data-expanded-icon Referensi Icons Tentukan ikon tombol penggabungan saat konten diubah ke mode terbuka. Default adalah "minus".
data-iconpos left | right | top | bottom Tentukan posisi ikon.
data-inset true | false Tentukan apakah tombol penggabungan memiliki gaya rounded corner dan margin.
data-mini true | false Tentukan apakah tombol penggabungan adalah ukuran kecil atau ukuran biasa.
data-theme letter (a-z) Tentukan warna tema tombol penggabungan.

Collapsible Set

Konten penggabungan di dalam kontainer yang mempunyai atribut data-role="collapsible-set".

Atribut Data Nilai Deskripsi
data-collapsed-icon Referensi Icons Tentukan ikon tombol penggabungan. Default adalah "plus".
data-content-theme letter (a-z) Tentukan warna tema konten penggabungan.
data-expanded-icon Referensi Icons Tentukan ikon tombol penggabungan saat konten diubah ke mode terbuka. Default adalah "minus".
data-iconpos kiri | kanan | atas | bawah | notext Tentukan posisi ikon.
data-inset true | false Tentukan apakah penggabungan memiliki gaya rounded corner dan margin.
data-mini true | false Tentukan apakah tombol penggabungan adalah ukuran kecil atau ukuran biasa.
data-theme letter (a-z) Tentukan warna tema penggabungan yang dapat terbuka.

Content

Kontainer yang mempunyai atribut data-role="content".

Atribut Data Nilai Deskripsi
data-theme letter (a-z) Tentukan warna tema konten. Default adalah "c".

Controlgroup

Kontainer <div> atau <fieldset> dengan atribut data-role="controlgroup". Kombinasikan beberapa input gaya tombol tunggal (berdasarkan tombol tautan, tombol pilihan, kotak centang, menu pilihan).

Atribut Data Nilai Deskripsi
data-mini true | false Tentukan apakah kombinasi adalah ukuran kecil atau ukuran biasa.
data-type horizontal | vertical Tentukan apakah kombinasi ditampilkan secara horizontal atau vertical.

Dialog

Kontainer yang mempunyai atribut data-role="dialog" atau tautan yang mempunyai data-rel="dialog".

Atribut Data Nilai Deskripsi
data-close-btn-text sometext Tentukan teks tombol tutup dialog.
data-dom-cache true | false Tentukan apakah untuk halaman individu dihapus cache jQuery DOM (jika diatur ke true, perhatikan pengelolaan DOM, dan uji keseluruhan semua perangkat bergerak).
data-overlay-theme letter (a-z) Tentukan warna latar belakang halaman dialog.
data-theme letter (a-z) Tentukan warna tema halaman dialog.
data-title sometext Tentukan judul halaman dialog.

Enhancement

Kontainer dengan atribut data-enhance="false" atau data-ajax="false".

Atribut Data Nilai Deskripsi
data-enhance true | false Jika diatur ke "true" (default), jQuery Mobile akan menambahkan gaya halaman secara otomatis untuk memadankan perangkat bergerak. Jika diatur ke "false", kerangka tidak akan mengatur gaya halaman.
data-ajax true | false Tentukan apakah halaman diambil melalui AJAX.

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

Saat $.mobile.ignoreContentEnabled diatur ke true, link atau elemen formulir dalam kontainer dengan data-ajax="false" akan diabaikan oleh fungsi navigasi kerangka.

Fieldcontainer

Kontainer yang membalut pasangan elemen label/form dengan data-role="fieldcontain".

Toolbar Tetap

Kontainer dengan atribut data-role="header" atau data-role="footer" serta atribut data-position="fixed".

Atribut Data Nilai Deskripsi
data-disable-page-zoom true | false Tentukan apakah pengguna dapat mengzoom halaman.
data-fullscreen true | false Tentukan apakah toolbar selalu berada di atas serta/atau bawah.
data-tap-toggle true | false Tentukan apakah pengguna dapat mengganti kenampakan toolbar dengan menekan/klik.
data-transition slide | fade | none Tentukan efek transisi saat menekan/klik terjadi.
data-update-page-padding true | false Tentukan mengupdate padding atas, bawah, dan dalam halaman saat terjadi perubahan ukuran, transisi, dan peristiwa "updatelayout" (jQuery Mobile selalu mengupdate padding dalam peristiwa "pageshow").
data-visible-on-page-show true | false Tentukan kenampakan toolbar saat halaman induk ditampilkan.

Flip Toggle Switch

Elemen <select> dengan atribut data-role="slider" serta dua elemen <option>.

Atribut Data Nilai Deskripsi
data-mini true | false Tentukan ukuran switch kecil atau ukuran standar.
data-role none Hindari jQuery Mobile menyetel switch toggle menjadi gaya tombol.
data-theme letter (a-z) Tentukan warna tema switch toggle.
data-track-theme letter (a-z) Tentukan warna tema jalur.

Footer

Kontainer dengan atribut data-role="footer".

Atribut Data Nilai Deskripsi
data-id sometext Tentukan ID unik. Diperlukan untuk footer persisten.
data-position inline | fixed Tentukan apakah footer halaman berhubungan dengan konten halaman secara inline, atau tetap di bawah.
data-fullscreen true | false Tentukan apakah footer halaman selalu berada di bawah dan menutupi konten halaman (sedikit transparan).
data-theme letter (a-z) Tentukan warna tema footer halaman. Defaultnya adalah "a".

Keterangan:Untuk mengaktifkan lokasi fullscreen, gunakan data-position="fixed" lalu tambahkan atribut data-fullscreen untuk elemen tersebut.

Header

Kontainer dengan data-role="header".

Atribut Data Nilai Deskripsi
data-id sometext Tentukan ID unik. Diperlukan untuk header persisten.
data-position inline | fixed Tentukan apakah header halaman berhubungan dengan konten halaman secara inline, atau tetap di atas.
data-fullscreen true | false Tentukan apakah halaman selalu berada di atas dan menutupi konten halaman (sedikit transparan).
data-theme letter (a-z) Tentukan warna tema header halaman. Defaultnya adalah "a".

Keterangan:Untuk mengaktifkan lokasi fullscreen, gunakan data-position="fixed" lalu tambahkan atribut data-fullscreen untuk elemen tersebut.

Link

Semua link, termasuk link dengan data-role="button" serta tombol pengiriman formulir.

Atribut Data Nilai Deskripsi
data-ajax true | false Tentukan apakah halaman diunggulkan melalui AJAX untuk memperbaiki pengalaman pengguna dan transisi. Jika diatur menjadi false, jQuery Mobile akan melakukan permintaan halaman biasa.
data-direction reverse Balikkan animasi transisi (hanya untuk halaman atau dialog)
data-dom-cache true | false Tentukan apakah menghapus cache DOM jQuery untuk halaman individu (jika diatur true, perhatikan manajemen DOM, dan uji keseluruhan semua perangkat mobile).
data-prefetch true | false Tentukan apakah halaman diambil pralaku ke DOM, untuk memungkinkan akses saat pengguna mengaksesnya.
data-rel back | dialog | eksternal | pop-up Tentukan opsi tentang bagaimana tindakan link. Kembali - Bergerak ke belakang dalam riwayat. Dialog - Buka halaman sebagai dialog, tidak dicatat di riwayat. Eksternal - Berhubungan dengan domain lain. Buka - Buka jendela pop-up.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Tentukan bagaimana transisi dari halaman ke halaman berikutnya. Lihat jQuery Mobile transisi.
data-position-to origin | jQuery selector | window Tentukan posisi kotak pop-up. Asal - Default. Muncul di link yang dibuka. Pemilih jQuery - Muncul di elemen yang ditentukan. Window - Muncul di tengah layar jendela.

List

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

Atribut Data Nilai Deskripsi
data-autodividers true | false Tentukan apakah untuk memisahkan otomatis item daftar.
data-count-theme letter (a-z) Tentukan warna tema keping hitung. Standar adalah "c".
data-divider-theme letter (a-z) Tentukan warna tema pemisah daftar. Standar adalah "b".
data-filter true | false Tentukan apakah untuk menambahkan kotak pencarian ke daftar.
data-filter-placeholder sometext Tentukan teks di kotak pencarian. Standar adalah "Filter items...".
data-filter-theme letter (a-z) Tentukan warna tema program filter pencarian. Standar adalah "c".
data-icon Referensi Icons Tentukan ikon daftar.
data-inset true | false Tentukan apakah untuk menambahkan gaya rounded dan margin eksternal ke daftar.
data-split-icon Referensi Icons Tentukan ikon tombol pemisah. Standar adalah "arrow-r".
data-split-theme letter (a-z) Tentukan warna tema tombol pemisah. Standar adalah "b".
data-theme letter (a-z) Tentukan warna tema daftar.

Item daftar

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

Atribut Data Nilai Deskripsi
data-filtertext sometext Tentukan teks yang dicari saat mengurutkan elemen. Teks ini bukan teks item daftar yang sebenarnya yang akan dicari.
data-icon Referensi Icons Tentukan ikon item daftar.
data-role list-divider Tentukan penanda pemisah daftar.
data-theme letter (a-z) Tentukan 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".

Atribut Data Nilai Deskripsi
data-icon Referensi Icons Tentukan ikon item daftar.
data-iconpos kiri | kanan | atas | bawah | notext Tentukan posisi ikon.

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

Page

Kontainer dengan atribut data-role="page".

Atribut Data Nilai Deskripsi
data-add-back-btn true | false Menambahkan tombol kembali otomatis, hanya untuk header halaman.
data-back-btn-text sometext Tentukan teks tombol kembali.
data-back-btn-theme letter (a-z) Tentukan warna tema tombol kembali.
data-close-btn-text letter (a-z) Tentukan teks tombol tutup di dialog.
data-dom-cache true | false Tentukan apakah menghapus cache DOM jQuery untuk halaman individu (jika diatur true, perhatikan manajemen DOM, dan uji keseluruhan semua perangkat mobile).
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

Container dengan atribut data-role="popup":

Atribut Data Nilai Deskripsi
data-corners true | false Tentukan apakah kotak pop-up memiliki sudut yang runcing.
data-overlay-theme letter (a-z) Tentukan warna latar belakang kotak pop-up. Standar adalah latar belakang transparan (none).
data-shadow true | false Tentukan apakah kotak pop-up memiliki bayangan.
data-theme letter (a-z) Tentukan warna tema kotak pop-up. Standar adalah meniru, "none" diatur menjadi transparan.
data-tolerance 30, 15, 30, 15 Tentukan jarak dengan batas sisi jendela (top, right, bottom, left).

Anchor dengan atribut data-rel="popup":

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

Tombol Radio

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

Atribut Data Nilai Deskripsi
data-mini true | false Tentukan apakah tombol kecil atau ukuran biasa.
data-role none Letakkan jQuery Mobile untuk membuat tombol pilihan ber gaya enhanced buttons.
data-theme letter (a-z) Tentukan warna tema tombol pilihan.

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

Select

Semua elemen <select>. Akan disetting gaya tombol otomatis, tanpa date-role.

Atribut Data Nilai Deskripsi
data-icon Referensi Icons Tentukan ikon elemen select. Default adalah "arrow-d".
data-iconpos kiri | kanan | atas | bawah | notext Tentukan posisi ikon.
data-inline true | false Tentukan apakah elemen select adalah dalam baris.
data-mini true | false Tentukan apakah elemen select adalah ukuran kecil atau ukuran standar.
data-native-menu true | false Jika diatur menjadi false, maka digunakan pilihan menu yang disesuaikan sendiri oleh jQuery (jika Anda menginginkan pilihan menu memiliki penampilan yang seragam di semua perangkat bergerak, maka direkomendasikan untuk digunakan).
data-overlay-theme letter (a-z) Tentukan warna tema pilihan jQuery yang disesuaikan (dipakai bersamaan dengan data-native-menu="false").
data-placeholder true | false Dapat disetting di elemen <option> select yang bukan asli.
data-role none Letakkan jQuery Mobile untuk mengatur gaya tombol elemen select.
data-theme letter (a-z) Tentukan 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

Element input dengan type="range" akan disetting gaya tombol otomatis, tanpa data-role.

Atribut Data Nilai Deskripsi
data-highlight true | false Tentukan apakah jalur slider akan ditonjolkan.
data-mini true | false Tentukan apakah slider adalah ukuran kecil atau ukuran standar.
data-role none Letakkan jQuery Mobile untuk mengatur gaya tombol penyetel slider.
data-theme letter (a-z) Tentukan warna tema kontrol slider (input, handle dan jalur).
data-track-theme letter (a-z) Tentukan warna tema jalur slider.

Input Teks & Textarea

Element input teks atau textarea dengan type="text|search|etc." akan disetting gaya otomatis, tanpa data-role.

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