jQuery Mobile - Classes CSS
Classes CSS jQuery
Vous pouvez utiliser différents types de classes CSS pour styliser les éléments comme décrit dans les sections ci-dessous.
Classes mondiales
Les classes suivantes peuvent être utilisées comme classes globales sur les widgets jQuery Mobile -
| N ° Sr. | Classe et description |
|---|---|
| 1 | ui-corner-all Il affiche les éléments aux coins arrondis. |
| 2 | ui-shadow Il affiche l'ombre des éléments. |
| 3 | ui-overlay-shadow Il affiche l'ombre de superposition des éléments. |
| 4 | ui-mini Il affiche les plus petits éléments. |
Classes de boutons
Le tableau suivant répertorie les classes de boutons utilisées avec les éléments d'ancrage ou de bouton -
| N ° Sr. | Classe et description |
|---|---|
| 1 | ui-btn Il spécifie que l'élément sera stylé comme bouton. |
| 2 | ui-btn-inline Il montre le bouton comme élément en ligne qui économise l'espace nécessaire pour l'étiquette. |
| 3 | ui-btn-icon-top Il place l'icône au-dessus du texte. |
| 4 | ui-btn-icon-right Il place l'icône à droite du texte. |
| 5 | ui-btn-icon-bottom Il place l'icône sous le texte. |
| 6 | ui-btn-icon-left Il place l'icône à gauche du texte. |
| sept | ui-btn-icon-notext Il montre la seule icône. |
| 8 | ui-btn-a|b Il affiche la couleur du bouton ("a" sera la couleur d'arrière-plan par défaut c'est-à-dire gris et "b" changera la couleur d'arrière-plan en noir). |
Classes d'icônes
Le tableau suivant répertorie les classes d'icônes utilisées avec les éléments d'ancrage ou de bouton -
| N ° Sr. | Classe et description |
|---|---|
| 1 | ui-icon-action Il montre l'icône d'action. |
| 2 | ui-icon-alert Il affiche le point d'exclamation à l'intérieur d'un triangle. |
| 3 | ui-icon-arrow-d-l Il spécifie vers le bas avec la flèche gauche. |
| 4 | ui-icon-arrow-d-r Il spécifie vers le bas avec la flèche droite. |
| 5 | ui-icon-arrow-u-l Il spécifie avec la flèche gauche. |
| 6 | ui-icon-arrow-u-r Il spécifie avec la flèche droite. |
| sept | ui-icon-arrow-l Il spécifie la flèche gauche. |
| 8 | ui-icon-arrow-r Il spécifie la flèche droite. |
| 9 | ui-icon-arrow-u Il spécifie la flèche vers le haut. |
| dix | ui-icon-arrow-d Il spécifie la flèche vers le bas. |
| 11 | ui-icon-bars Il montre les 3 barres horizontales les unes au-dessus des autres. |
| 12 | ui-icon-bullets Il montre les 3 puces horizontales les unes au-dessus des autres. |
| 13 | ui-icon-carat-d Il affiche le carat vers le bas. |
| 14 | ui-icon-carat-l Il affiche le carat à gauche. |
| 15 | ui-icon-carat-r Il affiche le carat à droite. |
| 16 | ui-icon-carat-u Il affiche le carat à la hausse. |
| 17 | ui-icon-check Il montre l'icône de coche. |
| 18 | ui-icon-comment Il spécifie le commentaire ou le message. |
| 19 | ui-icon-forbidden Il affiche l'icône d'interdiction. |
| 20 | ui-icon-forward Il spécifie l'icône de transfert. |
| 21 | ui-icon-navigation Il spécifie l'icône de navigation. |
| 22 | ui-icon-recycle Il affiche l'icône de recyclage. |
| 23 | ui-icon-refresh Il montre l'icône de rafraîchissement. |
| 24 | ui-icon-tag Il indique l'icône de balise. |
| 25 | ui-icon-video Il indique l'icône de la vidéo ou de la caméra. |
Cours à thème
Il propose deux types de thèmes différents tels que le thème «a» et le thème «b» pour personnaliser l'apparence de l'application. Vous pouvez créer vos propres classes de thème en ajoutant une lettre témoin (az). Le tableau suivant répertorie les classes de thème qui sont spécifiées de la lettre a à z.
| N ° Sr. | Classe et description |
|---|---|
| 1 | ui-bar-(a-z) Il affiche la couleur de la barre, y compris les en-têtes, les pieds de page et les autres barres de la page. |
| 2 | ui-body-(a-z) Il affiche la couleur du bloc de contenu, y compris la liste, les fenêtres contextuelles, les curseurs, les panneaux, les chargeurs, etc. |
| 3 | ui-btn-(a-z) Il affiche la couleur du bouton. |
| 4 | ui-group-theme-(a-z) Il affiche la couleur des groupes de contrôle, des vues de liste et des ensembles réductibles. |
| 5 | ui-overlay-(a-z) Il affiche la couleur d'arrière-plan des conteneurs de popup, de boîte de dialogue et de page. |
| 6 | ui-page-theme-(a-z) Il affiche la couleur des pages. |
Classes de grille
Le tableau suivant répertorie les classes de grille utilisées avec une largeur égale, sans bordure, arrière-plan, marge ou remplissage.
| N ° Sr. | Classe de grille | Colonnes | Largeurs de colonne | Correspond à |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-bloc-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloc-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloc-a | b | c | d | e |