jQuery CSS Kelas
jQuery Mobile menggunakan CSS Kelas untuk gaya elemen yang berbeda.
Untuk daftar referensi di bawah, kami telah menyertakan kelas CSS untuk gaya umum.
Kelas dunia
Kelas-kelas ini dapat ditambahkan pada setiap widget jQuery Mobile ( buttons, toolbars, panels, tables, lists , dll ..):
| Kelas | Deskripsi |
|---|---|
| ui-corner-all | Menambahkan sudut dibulatkan ke elemen |
| ui-shadow | Menambahkan bayangan untuk elemen |
| ui-overlay-shadow | Menambahkan overlay bayangan untuk elemen |
| ui-mini | Membuat elemen yang lebih kecil |
tombol Kelas
Selain kelas global, Anda dapat menambahkan kelas berikut untuk <a> atau <button> elemen (tidak <input> tombol):
| Kelas | Deskripsi |
|---|---|
| ui-btn | Harus ditambahkan ke <a> elemen jika Anda ingin mereka ditata sebagai tombol |
| ui-btn-inline | Menampilkan tombol inline |
| ui-btn-icon-top | Posisi ikon di atas teks tombol |
| ui-btn-icon-right | Posisi ikon di sebelah kanan teks tombol |
| ui-btn-icon-bottom | Posisi ikon di bawah teks tombol |
| ui-btn-icon-left | Posisi ikon di sebelah kiri dari teks tombol |
| ui-btn-icon-notext | Hanya menampilkan ikon |
| ui-btn-a|b | Menentukan warna tombol. "a" adalah default (latar belakang abu-abu dengan teks hitam), sedangkan "b" akan mengubah warna untuk latar belakang hitam dengan teks putih |
icon Kelas
Semua kelas icon tersedia untuk <a> dan <button> elemen (lihat Ikon Referensi untuk bagaimana menggunakan ikon pada unsur-unsur lain):
| Kelas | ikon Keterangan | icon |
|---|---|---|
| ui-icon-action | Action (panah searah jarum jam lengkung keluar dari kotak) | |
| ui-icon-alert | Tanda seru di dalam segitiga | |
| ui-icon-audio | Suara / Speaker | |
| ui-icon-arrow-d-l | Bawah, panah kiri | |
| ui-icon-arrow-d-r | Bawah, panah kanan | |
| ui-icon-arrow-u-l | Up, panah kiri | |
| ui-icon-arrow-u-r | Up, panah kanan | |
| ui-icon-arrow-l | panah kiri | |
| ui-icon-arrow-r | Panah kanan | |
| ui-icon-arrow-u | panah | |
| ui-icon-arrow-d | panah bawah | |
| ui-icon-back | Kembali (panah melengkung lengkung berlawanan ke atas) | |
| ui-icon-bars | Tiga bar horisontal satu sama lain | |
| ui-icon-bullets | Tiga peluru horisontal satu sama lain | |
| ui-icon-calendar | Kalender | |
| ui-icon-camera | Kamera | |
| ui-icon-carat-d | karat turun | |
| ui-icon-carat-l | karat kiri | |
| ui-icon-carat-r | karat yang tepat | |
| ui-icon-carat-u | up karat | |
| ui-icon-check | Tanda cek | |
| ui-icon-clock | Jam | |
| ui-icon-cloud | Awan | |
| ui-icon-comment | Komentar / Pesan | |
| ui-icon-delete | Menghapus | |
| ui-icon-edit | Mengedit / Pensil | |
| ui-icon-eye | Mata | |
| ui-icon-forbidden | terlarang tanda | |
| ui-icon-forward | Maju - (searah jarum jam lengkung panah melengkung ke atas) | |
| ui-icon-gear | Gigi | |
| ui-icon-grid | kisi | |
| ui-icon-heart | Hati / Cinta simbol | |
| ui-icon-home | Home / Rumah | |
| ui-icon-info | Informasi | |
| ui-icon-location | tempat | |
| ui-icon-lock | Lock / Gembok | |
| ui-icon-mail | Mail / Surat | |
| ui-icon-minus | Tanda kurang | |
| ui-icon-navigation | Navigasi | |
| ui-icon-phone | Telepon | |
| ui-icon-power | Daya (On / off) | |
| ui-icon-plus | Tanda tambah | |
| ui-icon-recycle | tanda daur ulang | |
| ui-icon-refresh | Refresh - panah Edaran | |
| ui-icon-search | Cari / kaca pembesar | |
| ui-icon-shop | Toko / Bag | |
| ui-icon-star | Bintang | |
| ui-icon-tag | Menandai | |
| ui-icon-user | User / Orang | |
| ui-icon-video | Kamera video |
Kelas tema
jQuery Mobile menyediakan dua kelas tema: a (abu-abu) dan b (hitam). Namun, Anda juga dapat membuat nilai kelas sendiri, kustom Anda - semua jalan sampai ke huruf "z" (Lihat bab Tema). Tabel di bawah ini berisi daftar kelas tema yang tersedia. Huruf (az) berarti bahwa Anda dapat menentukan surat dari a sampai z. Sebagai contoh: ui-bar-a atau ui-bar-b , dll
| Kelas | Deskripsi |
|---|---|
| ui-bar-(a-z) | Menentukan warna untuk sebuah bar - header, footer dan bar lainnya |
| ui-body-(a-z) | Menentukan warna untuk konten blok - konten halaman panel (usang dalam versi 1.4.0), ListView item, popup, collapsibles, loader, slider, dan panel |
| ui-btn-(a-z) | Menentukan warna untuk tombol (dan icon) |
| ui-group-theme-(a-z) | Menentukan warna untuk controlgroups, listviews dan set dilipat |
| ui-overlay-(a-z) | Menentukan warna latar belakang halaman yang dialog, popup dan wadah halaman lainnya muncul di atas |
| ui-page-theme-(a-z) | Menentukan warna untuk halaman |
Grid Kelas
Kolom dalam kotak yang lebar sama (dan lebar 100% total), tanpa batas, latar belakang, margin atau padding. Ada lima grid layout yang dapat digunakan:
| Grid Kelas | kolom | Lebar kolom | Sesuai dengan | Contoh |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Untuk informasi lebih lanjut tentang grid, baca jQuery Mobile Grids Bab .