jQuery Mudah Alih CSS 类
jQuery Mudah Alih kelas CSS
kelas CSS jQuery
kelas CSS Mudah Alih jQuery untuk menggayakan elemen yang berbeza.
Senarai berikut mengandungi gaya CSS biasa:
Kelas global
Kelas berikut boleh digunakan dalam widget Mudah Alih jQuery (butang, bar alat, panel, Jadual, senarai, dsb. ):
| Class | 描述 |
|---|---|
| ui-corner-all | 为元素添加圆角 |
| ui-shadow | 为元素添加阴影 |
| ui-overlay-shadow | 为元素添加多层阴影 |
| ui-mini | 让元素变小 |
Kelas butang
Selain kelas global, anda boleh menentukan <a> Tambahkan kelas berikut pada elemen <butang> (bukan butang <input>):
| Class | 描述 |
|---|---|
| ui-btn | 添加在 <a> 元素上并以按钮形式展示 |
| ui-btn-inline | 在同一行上显示按钮 |
| ui-btn-icon-top | 定位图标在按钮文本之上 |
| ui-btn-icon-right | 定位图标在按钮文本的右边 |
| ui-btn-icon-bottom | 定位图标在按钮文本之下 |
| ui-btn-icon-left | 定位图标在按钮文本的左边 |
| ui-btn-icon-notext | 只显示图标 |
| ui-btn-a|b | 指定按钮演示。"a" 是默认的 (灰色背景黑色文本样式), "b" 修改颜色为黑色背景白色文本 |
Kelas ikon
Semua kelas imej yang tersedia digunakan pada elemen <a> dan <butang> (lihat Rujukan Ikon Mudah Alih jQuery untuk cara menggunakannya pada elemen lain ) :
| Kelas | Ikon Penerangan | Ikon |
|---|---|---|
| ui-icon-action | Tindakan (biasanya digunakan untuk penukaran lompat halaman) |  |
| ui-icon-alert | Tanda seru dalam segi tiga |  |
| ui-icon-audio | Audio/speaker |  |
| ui-icon-arrow-d-l | Ikon panah kiri bawah |  |
| ui-icon-arrow-d-r | Anak panah kanan bawah |  |
| ui-icon-arrow-u-l | Anak panah kiri atas |  |
| ui-icon-arrow-u-r | Anak panah kanan atas |  |
| ui-ikon-anak panah-l | Anak panah sudut kiri |  |
| ui-icon-arrow-r | Anak panah sudut kanan |  |
| ui-icon-arrow-u | Anak panah atas |  |
| ui-icon-arrow-d | Ikon panah ke bawah |  |
| ui-icon -belakang | Kembali |  |
| ui-icon-bars | Tiga garisan mendatar, biasanya digunakan untuk memaparkan senarai Ikon butang |  |
| ui-icon-bullets | Digunakan untuk memaparkan ikon butang senarai |  |
| ui-icon-calendar | Kalendar |  |
| ui-icon-kamera | Kamera |  |
| ui-icon-carat-d | Leret ke bawah ikon |  |
| ui- icon-carat-l | Leret ikon ke kiri |  |
| ui-icon-carat-r | ke Kanan ikon slaid |  |
| ui-icon-carat-u | Ikon leret ke atas |  |
| ui-icon-check | Semak |  |
| ui-icon-clock | Jam penggera |  |
| ui-icon-cloud | awan |  |
| ui-ikon-ulasan | Ulasan/Mesej |  |
| ui-icon- padam | padam |  |
| ui-icon-edit | edit/pensel |  |
| ui-icon-eye | mata |  |
| ui-icon - dilarang | Lumpuhkan tanda tanda |  |
| ui-icon-forward | Undo- (kembali ke langkah sebelumnya) |  |
| ui-icon- gear | Gear, biasanya digunakan untuk menetapkan ikon butang |  |
| ui-icon-grid | Grid |  |
| ui-icon-heart | Bentuk hati, boleh digunakan untuk koleksi artikel |  |
| ui-icon-home | Homepage |  |
| ui-icon-info | Maklumat |  |
| ui-icon-location | Lokasi |  |
| ui-icon-lock | lock |  |
| ui-icon-mail | Mail/Sampul Surat |  |
| ui-icon-tolak | Tanda tolak |  |
| ui-icon-navigation | Navigation |  |
| ui-icon-phone | Telefon |  |
| ui-icon-power | Suis (Hidup/mati) |  |
| ui-icon-plus | tanda tambah |  |
| ui -ikon -kitar semula | kitaran Logo |  |
| ui-icon-refresh | Refresh |  |
| ui-icon-search | Cari/kaca pembesar |  |
| ui-icon-kedai | beg kedai/belanja |  |
| ui-ikon-bintang | bintang |  |
| ui-icon-tag | tag |  |
| ui-icon-user | Pengguna/Watak |  |
| ui-icon-video | Video/Kamera |  |
Kelas Tema
jQuery Mobile menyediakan dua kelas tema: a (kelabu) dan b (hitam). Walau bagaimanapun, anda boleh membuat kelas tersuai anda sendiri - sehingga huruf "z" (lihat tema Mudah Alih jQuery). Jadual berikut menyenaraikan kelas tema yang tersedia. Huruf (a-z) bermaksud gaya boleh ditentukan a hingga z. Contohnya ui-bar-a atau ui-bar-b dll.
| Kelas | Penerangan |
|---|
| Class | 描述 |
|---|---|
| ui-bar-(a-z) | 指定栏目演示 - 头部，底部及其他栏目 |
| ui-body-(a-z) | 指定内容块的颜色 - 页面内容部分 ( 1.4.0 版本已废弃), 列表视图， 弹窗, 侧栏，面板，加载，折叠。 |
| ui-btn-(a-z) | 指定按钮颜色 |
| ui-group-theme-(a-z) | 定义了控制组的演示 listviews 和 collapsible 集合。 |
| ui-overlay-(a-z) | 定义了页面背景颜色，包括对话框，弹窗和其他出现在最顶层的页面容器 |
| ui-page-theme-(a-z) | 定义了页面演示 |
Kelas grid
Lajur dalam grid adalah sama lebar (berjumlah hingga 100%), tanpa sempadan, latar belakang, jidar atau pelapik. Terdapat empat grid reka letak yang tersedia:
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | 尝试一下 |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 尝试一下 |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 尝试一下 |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | 尝试一下 |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | 尝试一下 |
Untuk maklumat lanjut, lihat bab Grid Mudah Alih jQuery.
