jQuery Classes CSS
jQuery Mobile utilisent les classes CSS pour le style de différents éléments.
Pour la liste de référence ci-dessous, nous avons inclus des classes CSS pour les styles communs.
Classes mondiales
Ces classes peuvent être ajoutées sur les widgets jQuery Mobile ( buttons, toolbars, panels, tables, lists d' buttons, toolbars, panels, tables, lists , etc ..):
| Classe | La description |
|---|---|
| ui-corner-all | Ajoute des coins arrondis à l'élément |
| ui-shadow | Ajoute l'ombre à l'élément |
| ui-overlay-shadow | Ajoute une ombre de recouvrement à l'élément |
| ui-mini | Rend le plus petit élément |
Classes de boutons
En plus des classes mondiales, vous pouvez ajouter les classes suivantes à <a> ou <button> éléments (non <input> boutons):
| Classe | La description |
|---|---|
| ui-btn | Doit être ajouté à <a> éléments si vous voulez qu'ils soient décorées comme des boutons |
| ui-btn-inline | Affiche le bouton inline |
| ui-btn-icon-top | Positions sur l'icône ci-dessus le texte du bouton |
| ui-btn-icon-right | Positions sur l'icône à droite du texte du bouton |
| ui-btn-icon-bottom | Positions sur l'icône ci-dessous le texte du bouton |
| ui-btn-icon-left | Positions sur l'icône à gauche du texte du bouton |
| ui-btn-icon-notext | Affiche uniquement l'icône |
| ui-btn-a|b | Indique la couleur du bouton. "a" est par défaut (fond gris avec du texte noir), tandis que "b" va changer la couleur d'un fond noir avec du texte blanc |
Classes d'icônes
Toutes les classes d'icônes disponibles pour <a> et <button> éléments (voir Icônes de référence pour savoir comment utiliser les icônes sur d' autres éléments):
| Classe | Icône description | Icône |
|---|---|---|
| ui-icon-action | Action (flèche vers la droite arc d'une boîte) | |
| ui-icon-alert | Exclamation mark dans un triangle | |
| ui-icon-audio | Son / haut-parleurs | |
| ui-icon-arrow-d-l | Vers le bas, flèche gauche | |
| ui-icon-arrow-d-r | Vers le bas, flèche droite | |
| ui-icon-arrow-u-l | Up, flèche gauche | |
| ui-icon-arrow-u-r | Up, flèche droite | |
| ui-icon-arrow-l | Flèche gauche | |
| ui-icon-arrow-r | Flèche droite | |
| ui-icon-arrow-u | Flèche vers le haut | |
| ui-icon-arrow-d | Flèche vers le bas | |
| ui-icon-back | Retour (flèche courbe d'arc dans le sens antihoraire vers le haut) | |
| ui-icon-bars | Trois barres horizontales sur l'autre | |
| ui-icon-bullets | Trois balles horizontales sur l'autre | |
| ui-icon-calendar | Calendrier | |
| ui-icon-camera | Caméra | |
| ui-icon-carat-d | carat vers le bas | |
| ui-icon-carat-l | carat gauche | |
| ui-icon-carat-r | carat droit | |
| ui-icon-carat-u | up carats | |
| ui-icon-check | Coche | |
| ui-icon-clock | Horloge | |
| ui-icon-cloud | Nuage | |
| ui-icon-comment | Commentaire / message | |
| ui-icon-delete | Effacer | |
| ui-icon-edit | Modifier / Crayon | |
| ui-icon-eye | Œil | |
| ui-icon-forbidden | signe interdite | |
| ui-icon-forward | À terme - (flèche incurvée arc dans le sens horaire vers le haut) | |
| ui-icon-gear | Équipement | |
| ui-icon-grid | la grille | |
| ui-icon-heart | Coeur / symbole de l'amour | |
| ui-icon-home | Maison | |
| ui-icon-info | Information | |
| ui-icon-location | Emplacement | |
| ui-icon-lock | Verrouiller / Cadenas | |
| ui-icon-mail | Courrier / Lettre | |
| ui-icon-minus | Signe moins | |
| ui-icon-navigation | La navigation | |
| ui-icon-phone | Téléphone | |
| ui-icon-power | Marche / arrêt) | |
| ui-icon-plus | signe plus | |
| ui-icon-recycle | Recycle sign | |
| ui-icon-refresh | Refresh - flèche circulaire | |
| ui-icon-search | Recherche / Loupe | |
| ui-icon-shop | Boutique / Sac | |
| ui-icon-star | Étoile | |
| ui-icon-tag | Étiquette | |
| ui-icon-user | Utilisateur / personne | |
| ui-icon-video | Caméra vidéo |
Classes thématiques
jQuery Mobile fournit deux classes à thème: un (gris) et b (noir). Cependant, vous pouvez également créer vos valeurs de classe propres, personnalisées - tout le chemin jusqu'à la lettre "z" (Voir le chapitre Thèmes). Le tableau ci-dessous répertorie les classes thématiques disponibles. Les lettres (az) signifie que vous pouvez spécifier une lettre de a à z. Par exemple: ui-bar-a ou ui-bar-b , etc.
| Classe | La description |
|---|---|
| ui-bar-(a-z) | Indique la couleur pour une barre - en-têtes, pieds de page et d'autres barres |
| ui-body-(a-z) | Indique la couleur pour un contenu bloc - contenu de la page vitres (dépréciée dans la version 1.4.0), articles de listview, popups, pliables, chargeur, curseurs et panneaux |
| ui-btn-(a-z) | Indique la couleur d'un bouton (et icône) |
| ui-group-theme-(a-z) | Indique la couleur pour des groupes témoins, listviews et ensembles pliables |
| ui-overlay-(a-z) | Indique la couleur de la page que le dialogue contextuel et d'autres conteneurs de page apparaît en haut de fond |
| ui-page-theme-(a-z) | Indique la couleur pour les pages |
Classes de grille
Les colonnes d'une grille sont d'égale largeur (et 100% de large au total), sans frontière, fond, la marge ou de rembourrage. Il y a cinq grilles de mise en page qui peuvent être utilisés:
| Grille de classe | Colonnes | Largeur des colonnes | Correspond à | Exemple |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Pour plus d' informations sur les réseaux, lire notre jQuery Mobile Grids Chapitre .