kelas jQuery Mobile CSS
jQuery kelas CSS
kelas jQuery Mobile CSS untuk gaya elemen yang berbeda.
Daftar berikut berisi gaya CSS umum:
global Kelas
Kelas berikut dapat menggunakan (tombol, toolbar, panel, tabel, daftar, dll) di jQuery Mobile gadget:
| kelas | deskripsi |
|---|---|
| ui-sudut-semua | Menambahkan fillet elemen |
| ui-shadow | Untuk menambahkan elemen bayangan |
| ui-overlay-shadow | Menambahkan elemen multi-layer shadow |
| ui-Mini | Mari elemen yang lebih kecil |
kelas tombol
Selain kelas global, Anda dapat menambahkan kelas berikut (bukan <input> tombol) untuk <a> atau <button> elemen:
| kelas | deskripsi |
|---|---|
| ui-btn | Tambahkan elemen <a> sebagai tombol dan layar |
| ui-btn-inline | tombol layar pada baris yang sama |
| ui-btn-icon-top | ikon target teks tombol |
| ui-btn-icon-benar | ikon sasaran di sebelah kanan teks tombol |
| ui-btn-icon-bottom | icon Target di bawah teks tombol |
| ui-btn-icon-kiri | ikon Target di sebelah kiri teks tombol |
| ui-btn-icon-notext | Hanya menampilkan icon |
| ui btn--a | b | Penunjukan tombol demo. "A" adalah default (teks hitam pada gaya latar belakang abu-abu), "b" untuk mengubah warna latar belakang hitam dengan teks putih |
kelas icon
Kelas dari semua gambar yang tersedia digunakan dalam <a> dan <button> elemen (Lihat panduan jQuery Mobile icon referensi untuk belajar bagaimana menggunakan unsur-unsur lainnya):
| Class | 图标描述 | 图标 |
|---|---|---|
| ui-icon-action | 动作 (一般用于页面跳转切换) |  |
| ui-icon-alert | 三角形内的感叹号 |  |
| ui-icon-audio | 音响/音箱 |  |
| ui-icon-arrow-d-l | 左下角箭头 |  |
| ui-icon-arrow-d-r | 右下角箭头 |  |
| ui-icon-arrow-u-l | 左上角箭头 |  |
| ui-icon-arrow-u-r | 右上角箭头 |  |
| ui-icon-arrow-l | 左角箭头 |  |
| ui-icon-arrow-r | 右角箭头 |  |
| ui-icon-arrow-u | 向上箭头 |  |
| ui-icon-arrow-d | 向下箭头 |  |
| ui-icon-back | 返回 |  |
| ui-icon-bars | 三条水平线，一般用于展示列表按钮图标 |  |
| ui-icon-bullets | 用于展示列表按钮图标 |  |
| ui-icon-calendar | 日历 |  |
| ui-icon-camera | 相机 |  |
| ui-icon-carat-d | 向下滑动图标 |  |
| ui-icon-carat-l | 向左滑动图标 |  |
| ui-icon-carat-r | 向右滑动图标 |  |
| ui-icon-carat-u | 向上滑动图标 |  |
| ui-icon-check | 勾选 |  |
| ui-icon-clock | 闹钟 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 评论 / 消息 |  |
| ui-icon-delete | 删除 |  |
| ui-icon-edit | 编辑 / 铅笔 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁用标识 sign |  |
| ui-icon-forward | 撤销 - (返回上一步) |  |
| ui-icon-gear | 齿轮，一般用于设置按钮图标 |  |
| ui-icon-grid | 网格 |  |
| ui-icon-heart | 心型，可用于文章收藏 |  |
| ui-icon-home | 主页 |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 锁 |  |
| ui-icon-mail | 邮件 / 信封 |  |
| ui-icon-minus | 减号 |  |
| ui-icon-navigation | 导航 |  |
| ui-icon-phone | 电话 |  |
| ui-icon-power | 开关 (On/off) |  |
| ui-icon-plus | 加号 |  |
| ui-icon-recycle | 循环 标识 |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大镜 |  |
| ui-icon-shop | 商店/购物袋 |  |
| ui-icon-star | 星号 |  |
| ui-icon-tag | 标签 |  |
| ui-icon-user | 用户 / 人物 |  |
| ui-icon-video | 视频 / 相机 |  |
kategori topik Kelas
jQuery Mobile tema menyediakan dua kelas: a (abu-abu) dan b (hitam). Namun, Anda dapat membuat kelas kustom Anda sendiri - untuk menentukan huruf "z" (Lihat tema jQuery Mobile ). Tabel berikut berisi daftar yang tersedia kelas tema. Surat (az) berarti Anda dapat menentukan gaya untuk z. Misalnya ui-bar-atau ui-bar-b dan sejenisnya.
| kelas | deskripsi |
|---|---|
| ui-bar-(az) | Menentukan kolom Demo - header, footer dan bagian lainnya |
| ui-tubuh-(az) | Menentukan warna keping konten - halaman bagian konten (versi 1.4.0 usang), tampilan daftar, pop, sidebar, panel, beban, runtuh. |
| ui-btn- (az) | Tentukan tombol warna |
| ui-kelompok-tema- (az) | Mendefinisikan kelompok kontrol listviews presentasi dan koleksi dilipat. |
| ui-overlay- (az) | Mendefinisikan warna latar belakang halaman, termasuk kotak dialog, pop-up dan halaman tingkat atas lainnya muncul dalam wadah |
| ui-halaman-tema- (az) | Tentukan halaman Demo |
kelas Grid
kolom Grid adalah lebar sama (Total 100%), tidak ada batas, latar belakang, margin atau padding. Ada empat grid layout yang tersedia:
| kelas Grid | baris | kolom Lebar | korespondensi | contoh |
|---|---|---|---|---|
| ui-grid-sendirian | 1 | 100% | ui-blok-a | mencoba |
| ui-grid-a | 2 | 50% / 50% | ui-blok-a | b | mencoba |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-blok-a | b | c | mencoba |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-blok-a | b | c | d | mencoba |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-blok-a | b | c | d | e | mencoba |
Informasi lebih lanjut tersedia jQuery Mobile Grid bagian.