Vidéo: Découverte de jQuery UI 2025
Les créateurs de jQuery et de jQuery UI CSS font un bon travail de documentation des composants internes de leur bibliothèque. D'un point de vue CSS, le matériel trouvé à jqueryui. com vous parle des styles utilisés pour créer la sortie que vous avez vue à différents endroits. Voici une bonne idée de la façon dont la page initiale de la documentation est présentée.
L'une des premières choses que vous remarquerez sur cette page est que les développeurs vous recommandent d'utiliser ThemeRoller pour apporter vos modifications dans la mesure du possible. Cependant, il existe de nombreux cas où ThemeRoller ne fera tout simplement pas le travail, vous devez donc effectuer les modifications de manière plus traditionnelle.
Les classes sont divisées en deux fichiers avec un certain nombre de styles dans chaque fichier:
-
jquery. ui. coeur. css: Contient tous les styles qui affectent les éléments structurels d'une manière ou d'une autre. Ceux-ci incluent
-
Aide à la mise en page: Détermine la disposition générale des objets à l'écran; permet d'interagir avec les technologies d'assistance; et fournit une méthode pour réinitialiser la mise en page selon les besoins.
-
Cues d'interaction: Définit quand un objet est désactivé.
-
Icônes: Spécifie l'état de l'icône.
-
Superpositions: Détermine la taille et la position des superpositions.
-
-
jquery. ui. thème. css: Définit tous les styles qui affectent les éléments thématiques, tels que la couleur, les polices et les arrière-plans. Ceux-ci comprennent
-
Conteneurs de composants: Spécifiez l'apparence du contenu dans différents conteneurs d'objets. Les conteneurs incluent normalement l'objet global, les en-têtes d'objet et les données d'objet (spécifiés comme contenu dans les styles).
-
Etats d'interaction: Déterminer l'apparence d'un objet lorsque des états d'interaction spécifiques se produisent. Les quatre états d'interaction sont: par défaut (lorsque rien ne se passe avec l'objet), survol (lorsque le curseur de la souris est sur l'objet), actif (lorsque l'utilisateur effectue réellement une tâche avec l'objet) et focus (lorsque l'utilisateur a sélectionné l'objet, mais ne fait rien avec).
-
Cues d'interaction: Déterminer l'apparence d'un objet dans un état particulier pour aider l'utilisateur à comprendre l'état de l'objet.
Les indices d'interaction sont: highlight (l'objet ou le contenu est sélectionné pour l'interaction); erreur (une erreur est survenue avec un objet); texte d'erreur (une erreur s'est produite avec le contenu, généralement du texte, dans un objet); désactivé (l'objet ou le contenu sont désactivés); primaire (un objet est l'objet primaire ou de premier niveau dans une hiérarchie d'objets); et secondaire (un objet est l'objet secondaire ou secondaire dans une hiérarchie d'objets).
-
Icônes: Définissez l'état et le positionnement des icônes utilisées avec un objet. L'état et le positionnement sont contrôlés séparément. Les informations d'état déterminent si l'icône fait partie d'un en-tête ou du contenu. En outre, il détermine le formatage en fonction de l'état de l'icône: par défaut, survol, actif, surligné, erreur et texte d'erreur. Les icônes sont positionnées individuellement en fonction du nom de l'icône, tel que. ui-icon-carat-1-n.
Les icônes sont en fait définies au format bloc dans la section des états et des images de la partie des icônes du fichier.
Vous pouvez voir les images des icônes spécifiques au widget ici.
Les images d'icône par défaut apparaissent ici.
Vous trouverez ici les images des icônes actives et celles utilisées pour la mise en évidence ici.
Lorsqu'une application rencontre une erreur, vous voyez la liste des icônes ici.
-
Rayon d'angle: Crée des coins arrondis sur les différents objets.
-
Incrustations: Détermine la mise en forme du contenu dans les superpositions et le formatage de l'ombre de superposition (afin que vous puissiez voir qu'il y a un objet derrière l'objet au recto).
-
Afin de mieux comprendre comment les choses fonctionnent, c'est une bonne idée de regarder les fichiers réels. Vous pouvez trouver le premier fichier à un emplacement tel que // code. jquery. com / ui / 1. 9. 2 / themes / base / jquery. ui. coeur. css où // code. jquery. com / ui / est l'URL de base, 1. 9. 2 est la version de jQuery ou jQuery UI en question, et themes / base / jquery. ui. thème. css est l'emplacement du fichier spécifique.
Pour obtenir une copie du CSS pour une version différente de jQuery ou de jQuery UI, il vous suffit de changer la partie du numéro de version de l'URL. Le deuxième fichier se trouve à un emplacement tel que // code. jquery. com / ui / 1. 9. 2 / themes / base / jquery. ui. thème. css. C'est ce que vous verrez en regardant jquery. ui. coeur. css.
/ * ui-icon-seek-first est obsolète, utilisez plutôt ui-icon-seek-start * /
Le style est commenté pour que vous ne puissiez pas l'utiliser. Cependant, la note est toujours importante car elle vous indique le style à utiliser à la place.
