jQuery Mobile CSS
jQuery Mobile Classes CSS
Classes CSS jQuery
Classes CSS jQuery Mobile pour styliser différents éléments.
La liste suivante contient les styles CSS courants :
Classes globales
Les classes suivantes peuvent être utilisées dans les widgets jQuery Mobile (boutons, barres d'outils, panneaux, tableaux, listes, etc. ):
| Class | 描述 |
|---|---|
| ui-corner-all | 为元素添加圆角 |
| ui-shadow | 为元素添加阴影 |
| ui-overlay-shadow | 为元素添加多层阴影 |
| ui-mini | 让元素变小 |
Classe de bouton
En plus de la classe globale, vous pouvez spécifier <a> Ajoutez la classe suivante à l'élément <button> (pas au bouton <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" 修改颜色为黑色背景白色文本 |
Classes d'icônes
Toutes les classes d'images disponibles sont utilisées sur les éléments <a> et <button> ) :
| Classe | Description de l'icône | Icône |
|---|---|---|
| ui-icon-action | Action (généralement utilisée pour changer de page) |  |
| ui-icon-alert | Point d'exclamation dans un triangle |  |
| ui-icon-audio | Audio/haut-parleur |  |
| ui-icon-arrow-d-l | Flèche du coin inférieur gauche |  |
| ui-icon-arrow-d-r | Flèche inférieure droite |  |
| ui-icon-arrow-u-l | Flèche supérieure gauche |  |
| ui-icon-arrow-u-r | Flèche supérieure droite |  |
| ui-icon-arrow-l | Flèche du coin gauche |  |
| ui-icon-arrow-r | Flèche du coin droit |  |
| ui-icon-arrow-u | Flèche vers le haut |  |
| ui-icon-arrow-d | Flèche vers le bas |  |
| ui-icon -back | Retour |  |
| ui-icon-bars | Trois lignes horizontales, généralement utilisées pour afficher la liste Icône des boutons |  |
| ui-icon-bullets | Utilisé pour afficher les icônes des boutons de liste |  |
| ui-icon-calendar | Calendrier |  |
| ui-icon-camera | Caméra |  |
| ui-icon-carat-d | Faites glisser l'icône vers le bas |  |
| ui- icon-carat-l | Faites glisser l'icône vers la gauche |  |
| ui-icon-carat-r | vers la droite icône de diapositive |  |
| ui-icon-carat-u | Icône de balayage vers le haut |  |
| ui-icon-check | Vérifier |  |
| ui-icon-clock | Réveil |  |
| ui-icon-cloud | cloud |  |
| ui-icon-comment | Commentaire/Message |  |
| ui-icon- delete | supprimer |  |
| ui-icon-edit | modifier/crayon |  |
| ui-icon-eye | oeil |  |
| ui-icon - interdit | Désactiver le panneau de signalisation |  |
| ui-icon-forward | Annuler- (revenir à l'étape précédente) |  |
| ui-icon- gear | Gear, généralement utilisé pour définir les icônes des boutons |  |
| ui-icon-grid | Grid |  |
| ui-icon-heart | Forme de coeur, peut être utilisé pour la collection d'articles |  |
| ui-icon-home | Page d'accueil |  |
| ui-icon-info | Informations |  |
| ui-icon-location | Emplacement |  |
| ui-icon-lock | lock |  |
| ui-icon-mail | Courrier/Enveloppe |  |
| ui-icon-minus | Signe moins |  |
| ui-icon-navigation | Navigation |  |
| ui-icon-phone | Téléphone |  |
| ui-icon-power | Interrupteur (On/off) |  |
| ui-icon-plus | signe plus |  |
| ui -icon -recycle | cycle Logo |  |
| ui-icon-refresh | Actualiser |  |
| ui-icon-search | Recherche/loupe |  |
| ui-icon-shop | boutique/sac shopping |  |
| ui-icon-star | étoile |  |
| ui-icon-tag | tag |  |
| ui-icon-user | Utilisateur/Personnage |  |
| ui-icon-video | Vidéo/Caméra |  |
Classes de thème
jQuery Mobile propose deux classes de thème : a (gris) et b (noir). Cependant, vous pouvez créer votre propre classe personnalisée – jusqu'à la lettre « z » (voir Thèmes jQuery Mobile). Le tableau suivant répertorie les classes de thème disponibles. Les lettres (a-z) signifient que le style peut être spécifié de a à z. Par exemple ui-bar-a ou ui-bar-b etc.
| Classe | Description |
|---|
| 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) | 定义了页面演示 |
Classe de grille
Les colonnes d'une grille ont une largeur égale (totalisant 100 %), sans bordures, arrière-plans, marges ou remplissage. Quatre grilles de mise en page sont disponibles :
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| 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 | 尝试一下 |
Pour plus d'informations, consultez le chapitre jQuery Mobile Grids.
