classe jQuery Mobile CSS
jQuery classe CSS
classe jQuery Mobile CSS styler différents éléments.
La liste suivante contient les styles CSS généraux:
Catégorie mondiale
Les classes suivantes peuvent utiliser (boutons, barres d'outils, panneaux, tableaux, listes, etc.) dans le gadget jQuery Mobile:
| classe | description |
|---|---|
| ui-coin-all | Ajout d'un élément de filet |
| ui-shadow | Pour ajouter un élément d'ombre |
| ui-overlay-shadow | Ajout d'un élément multicouche ombre |
| ui-mini | Laissez les petits éléments |
classe Button
En plus de la classe mondiale, vous pouvez ajouter la classe suivante (pas <input> bouton) <a> ou élément <button>:
| classe | description |
|---|---|
| ui-btn | Ajouter les éléments <a> que des boutons et de l'affichage |
| ui-btn-inline | Bouton d'affichage sur la même ligne |
| ui-btn-icon-top | icône de cible sur le texte du bouton |
| ui-btn-icon-droite | icône de cible à la droite du texte du bouton |
| ui-btn-icon-bottom | icône Cible ci-dessous le texte du bouton |
| ui-btn-icon-gauche | icône de cible à la gauche du texte du bouton |
| ui-btn-icon-notext | Afficher seulement icon |
| ui-btn-a | b | Désignation bouton démo. "A" est la valeur par défaut (texte noir sur un style de fond gris), "b" pour changer la couleur d'un fond noir avec du texte blanc |
classe Icon
Classe de toutes les images disponibles utilisées dans <a> et élément <button> (Voir manuel jQuery Mobile de référence de l' icône pour apprendre à utiliser sur d' autres éléments):
| 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 | 视频 / 相机 |  |
catégorie Sujet Classes
thème jQuery Mobile fournit deux classes: un (gris) et b (noir). Cependant, vous pouvez créer vos propres classes personnalisées - pour définir la lettre "z" (voir thèmes jQuery Mobile ). Le tableau suivant présente la classe de thèmes disponibles. Lettres (az) signifie que vous pouvez spécifier un style à z. Par exemple ui-bar-un ou ui-bar-b et similaires.
| classe | description |
|---|---|
| ui-bar- (az) | Spécifiez la démo de colonne - en-tête, pied de page et d'autres sections |
| ui-corps- (az) | Indique la couleur des morceaux de contenu - contenu de la page de section (version 1.4.0 obsolète), liste, pop, barre latérale, panneau, charge, effondré. |
| ui-btn- (az) | Spécifiez une couleur du bouton |
| ui-groupe-theme- (az) | Il définit un groupe de contrôle listviews de présentation et de collecte pliable. |
| ui-overlay- (az) | Définit les couleurs de fond de page, boîtes de dialogue pop-ups et autres pages de haut niveau, y compris apparaissent dans le conteneur |
| ui-page-theme- (az) | Définir la page Demo |
classe de grille
colonnes de la grille sont d'égale largeur (total 100%), sans frontière, fond, la marge ou de rembourrage. Il y a quatre grille de mise en page sont disponibles:
| classe de grille | rangée | Largeur de colonne | correspondance | Exemples |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-bloc-un | essayer |
| ui-grid-un | 2 | 50% / 50% | ui-bloc-a | b | essayer |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-bloc-a | b | c | essayer |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloc-a | b | c | d | essayer |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloc-a | b | c | d | e | essayer |
Des informations complémentaires sont disponibles jQuery Mobile Grille section.