jQuery Mobile - Kelas CSS
Kelas CSS jQuery
Anda dapat menggunakan berbagai jenis kelas CSS untuk mengatur gaya elemen seperti yang dijelaskan pada bagian di bawah ini.
Kelas Global
Kelas-kelas berikut dapat digunakan sebagai kelas global pada widget jQuery Mobile -
| Sr.No. | Kelas & Deskripsi |
|---|---|
| 1 | ui-corner-all Ini menampilkan elemen dengan sudut membulat. |
| 2 | ui-shadow Ini menampilkan bayangan untuk elemen. |
| 3 | ui-overlay-shadow Ini menampilkan bayangan overlay untuk elemen. |
| 4 | ui-mini Ini menampilkan elemen yang lebih kecil. |
Kelas Tombol
Tabel berikut mencantumkan kelas tombol yang digunakan dengan elemen jangkar atau tombol -
| Sr.No. | Kelas & Deskripsi |
|---|---|
| 1 | ui-btn Ini menentukan bahwa elemen akan diberi gaya sebagai tombol. |
| 2 | ui-btn-inline Ini menunjukkan tombol sebagai elemen inline yang menghemat ruang yang diperlukan untuk label. |
| 3 | ui-btn-icon-top Ini menempatkan ikon di atas teks. |
| 4 | ui-btn-icon-right Ini menempatkan ikon di kanan teks. |
| 5 | ui-btn-icon-bottom Ini menempatkan ikon di bawah teks. |
| 6 | ui-btn-icon-left Ini menempatkan ikon di kiri teks. |
| 7 | ui-btn-icon-notext Ini menunjukkan satu-satunya ikon. |
| 8 | ui-btn-a|b Ini akan menampilkan warna tombol ("a" akan menjadi warna latar belakang default yaitu abu-abu dan "b" akan mengubah warna latar belakang menjadi hitam). |
Kelas Ikon
Tabel berikut mencantumkan kelas ikon yang digunakan dengan elemen jangkar atau tombol -
| Sr.No. | Kelas & Deskripsi |
|---|---|
| 1 | ui-icon-action Ini menunjukkan ikon tindakan. |
| 2 | ui-icon-alert Ini menampilkan tanda seru di dalam segitiga. |
| 3 | ui-icon-arrow-d-l Ini menentukan bawah dengan panah kiri. |
| 4 | ui-icon-arrow-d-r Ini menentukan bawah dengan panah kanan. |
| 5 | ui-icon-arrow-u-l Ini menentukan dengan panah kiri. |
| 6 | ui-icon-arrow-u-r Ini menentukan dengan panah kanan. |
| 7 | ui-icon-arrow-l Ini menentukan panah kiri. |
| 8 | ui-icon-arrow-r Ini menentukan panah kanan. |
| 9 | ui-icon-arrow-u Ini menentukan panah atas. |
| 10 | ui-icon-arrow-d Ini menentukan panah bawah. |
| 11 | ui-icon-bars Ini menunjukkan 3 batang horizontal satu di atas yang lain. |
| 12 | ui-icon-bullets Ini menunjukkan 3 peluru horizontal satu di atas yang lain. |
| 13 | ui-icon-carat-d Ini menampilkan karat ke bawah. |
| 14 | ui-icon-carat-l Ini menampilkan karat ke kiri. |
| 15 | ui-icon-carat-r Ini menampilkan karat ke kanan. |
| 16 | ui-icon-carat-u Ini menampilkan karat ke atas. |
| 17 | ui-icon-check Ini menunjukkan ikon tanda centang. |
| 18 | ui-icon-comment Ini menentukan komentar atau pesan. |
| 19 | ui-icon-forbidden Ini menampilkan ikon terlarang. |
| 20 | ui-icon-forward Ini menentukan ikon maju. |
| 21 | ui-icon-navigation Ini menentukan ikon navigasi. |
| 22 | ui-icon-recycle Ini menampilkan ikon daur ulang. |
| 23 | ui-icon-refresh Ini menunjukkan ikon segarkan. |
| 24 | ui-icon-tag Ini menunjukkan ikon tag. |
| 25 | ui-icon-video Ini menunjukkan ikon video atau kamera. |
Kelas Tema
Ini menyediakan dua jenis tema yang berbeda seperti tema "a" dan tema "b" untuk menyesuaikan tampilan aplikasi. Anda dapat membuat kelas tema Anda sendiri dengan menambahkan surat contoh (az). Tabel berikut mencantumkan kelas tema yang ditentukan dari huruf a hingga z.
| Sr.No. | Kelas & Deskripsi |
|---|---|
| 1 | ui-bar-(a-z) Ini menampilkan warna untuk bar termasuk header, footer, dan bar lainnya di halaman. |
| 2 | ui-body-(a-z) Ini menampilkan warna untuk blok konten termasuk listview, popup, slider, panel, loader, dll. |
| 3 | ui-btn-(a-z) Ini menampilkan warna untuk tombol. |
| 4 | ui-group-theme-(a-z) Ini menampilkan warna untuk grup kontrol, tampilan daftar, dan kumpulan yang dapat diciutkan. |
| 5 | ui-overlay-(a-z) Ini menampilkan warna latar belakang untuk popup, dialog, dan penampung halaman. |
| 6 | ui-page-theme-(a-z) Ini menampilkan warna untuk halaman. |
Kelas Grid
Tabel berikut mencantumkan kelas kisi yang digunakan dengan lebar yang sama, tanpa batas, latar belakang, margin, atau padding.
| Sr.No. | Kelas Grid | Kolom | Lebar Kolom | Sesuai dengan |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-blok-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-blok-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-blok-a | b | c | d | e |