API du cadre CSS jQuery UI

Framework CSS jQuery UI

jQuery UI comprend un puissant framework CSS conçu pour créer des widgets jQuery personnalisés. Le framework contient les classes requises pour une interface utilisateur commune et peut être maintenu à l'aide de jQuery UI ThemeRoller. Créez vos propres composants d'interface utilisateur à l'aide du framework CSS jQuery UI. Vous devez adopter des conventions de balisage partagées pour faciliter l'intégration du code au sein de la communauté des plugins.

Classe Framework

Les classes CSS suivantes sont définies dans ui.core.css selon que le style est fixe et structuré, ou qu'il peut être thématisé (couleur, police, fond, etc.) et ui.theme.css dans les deux fichiers. Ces classes sont conçues pour être utilisées avec des éléments de l'interface utilisateur afin d'obtenir une cohérence visuelle dans toute l'application, et les composants peuvent être thématiques via jQuery UI ThemeRoller.

Layout Helper

.ui-helper-hidden : appliquer display: none à un élément.
.ui-helper-hidden-accessible : Applique le masquage d'accès (via le positionnement absolu de la page) à l'élément.
.ui-helper-reset : réinitialisation du style de base pour les éléments de l'interface utilisateur. Réinitialisez les éléments tels que : padding, margin, text-decoration, style de liste, etc.
.ui-helper-clearfix : applique l'attribut float wrapper à l'élément parent.
.ui-helper-zfix : appliquez le CSS iframe "fix" à l'élément <iframe>.

Widget Container

.ui-widget : Classe appliquée au conteneur externe de tous les widgets. Appliquez une police et une taille de police au widget, mais appliquez également la même police et la même taille de police 1em aux éléments auto-formés pour tenir compte des problèmes d'héritage dans les navigateurs Windows.
.ui-widget-header : Classe appliquée au conteneur de titre. Applique des styles de conteneur de titre au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-widget-content : Classe appliquée au conteneur de contenu. Appliquez des styles de conteneur de contenu au texte, aux liens et aux icônes de l'élément et de ses éléments enfants. (Peut être appliqué aux éléments parents ou aux éléments frères du titre)

État d'interaction

.ui-state-default : appliqué aux éléments du bouton cliquable Classe . Appliquez le style de conteneur « cliquable par défaut » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-state-hover : Classe appliquée lorsque la souris survole un élément de bouton cliquable. Appliquez le style de conteneur « survol cliquable » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-state-focus : Classe appliquée lorsque le focus du clavier est sur un élément de bouton cliquable. Appliquez le style de conteneur « survol cliquable » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-state-active : Classe appliquée lorsque la souris clique sur l'élément bouton cliquable. Appliquez le style de conteneur « actif cliquable » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.

Invites interactives Indices

.ui-state-highlight : Classe appliquée aux éléments en surbrillance ou sélectionnés. Appliquez le style de conteneur « surligner » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-state-error : Classe appliquée à l'élément conteneur du message d'erreur. Applique le style de conteneur « erreur » au texte, aux liens et aux icônes de l'élément et de ses éléments enfants.
.ui-state-error-text : Classe appliquée à la couleur du texte d'erreur sans arrière-plan uniquement. Peut être utilisé pour les étiquettes de formulaire et peut également appliquer des couleurs d’icône d’erreur aux sous-icônes.
.ui-state-disabled : applique une faible opacité aux éléments désactivés de l'interface utilisateur. Signifie ajouter des styles supplémentaires à un élément de style déjà défini.
.ui-priority-primary : Classe appliquée au premier bouton prioritaire. Appliquez du texte en gras.
.ui-priority-secondary : Classe appliquée au deuxième bouton prioritaire. Appliquez un texte de poids normal et une légère transparence à l'élément.

Icône

État et image

.ui-icon : Classe de base appliquée aux éléments d'icône. Définissez la taille sur un carré de 16 pixels, masquez le texte intérieur et définissez une image d'arrière-plan pour l'image du sprite dans l'état "contenu". Remarque : .ui-icon la classe obtiendra une image d'arrière-plan de sprite différente en fonction de son conteneur parent. Par exemple, un élément ui-state-default à l'intérieur d'un conteneur ui-icon sera coloré en fonction de la couleur de l'icône ui-state-default.

Type d'icône

Après avoir déclaré la classe .ui-icon, vous pouvez ensuite déclarer une classe du deuxième type d'icône de vitesse. Normalement, les classes d'icônes suivent la syntaxe .ui-icon-{icon type}-{icon sub description}-{direction}.

Par exemple, une icône triangulaire pointant vers la droite, comme ceci : .ui-icon-triangle-1-e

Le ThemeRoller de jQuery UI offre un ensemble complet d'icônes de cadre CSS. Passez votre souris sur l'icône pour voir le nom de la classe.

Autres effets visuels

Aide au rayon de coin

.ui-corner-tl : applique un rayon de coin au coin supérieur gauche d'un élément.
.ui-corner-tr : Applique un rayon de coin au coin supérieur droit de l'élément.
.ui-corner-bl : Applique un rayon de coin au coin inférieur gauche de l'élément.
.ui-corner-br : Applique un rayon de coin au coin inférieur droit de l'élément.
.ui-corner-top : Applique un rayon de coin aux coins gauche et droit de l'élément.
.ui-corner-bottom : Applique un rayon de coin aux coins gauche et droit de l'élément.
.ui-corner-right : applique un rayon de congé aux coins supérieur et inférieur sur le côté droit de l'élément.
.ui-corner-left : applique un rayon de congé aux coins supérieur et inférieur sur le côté gauche de l'élément.
.ui-corner-all : applique un rayon de coin aux quatre coins de l'élément.

Superposition et ombre

.ui-widget-overlay : applique 100 % de la largeur et de la hauteur à l'écran de superposition, tout en définissant la couleur/texture d'arrière-plan et Écran pas transparence.
.ui-widget-shadow : Pour la classe appliquée à la superposition, définissez l'opacité, le décalage haut/gauche et "l'épaisseur" de l'ombre. L'épaisseur est appliquée en définissant un remplissage sur tous les côtés de l'ombre. Le décalage est appliqué en définissant la marge supérieure et la marge gauche (peut être un nombre positif ou négatif).