Thèmes de l'interface utilisateur jQuery


Tous les plugins jQuery UI permettent aux développeurs d'intégrer de manière transparente des widgets d'interface utilisateur dans l'apparence de leur site Web ou de leur application. Chaque plug-in définit des styles via CSS et contient deux couches d'informations de style : les styles de framework CSS jQuery UI standard et les styles de plug-in spécifiques.

Le framework CSS jQuery UI fournit des classes pour la représentation sémantique, utilisées pour indiquer le rôle des éléments dans un widget, tels que le titre, le contenu ou la zone cliquable. Ceux-ci sont cohérents sur tous les widgets, un onglet cliquable, un accordéon ou un bouton a la même classe ui-state-default pour indiquer qu'ils sont cliquables. Lorsque l'utilisateur passe la souris sur ces éléments, cette classe devient ui-state-hover, et lorsque ces éléments sont sélectionnés, elle devient ui-state-active. La cohérence de ces classes fait que les éléments ayant des rôles ou des états d'interaction similaires apparaissent cohérents dans tous les widgets.

Les styles de cadre CSS sont encapsulés dans un fichier séparé nommé ui.theme.css. Ce fichier est modifié via l'application ThemeRoller. Les styles de cadre contiennent uniquement des propriétés qui affectent l'apparence, à condition qu'il s'agisse de couleurs, d'images d'arrière-plan, d'icônes, etc. Ce sont donc des styles « sûrs » et n’affecteront pas la fonctionnalité du plugin. Cette séparation signifie que les développeurs peuvent créer une apparence personnalisée en modifiant les couleurs et les images dans le fichier theme.css. Au fur et à mesure que de futurs plugins ou corrections de bugs seront disponibles, ceux-ci fonctionneront avec le thème sans modification.

Étant donné que le style du cadre ne couvre que l'apparence, des feuilles de style de plug-in spécifiques doivent être incluses. Ces feuilles de style incluent toutes les règles de style structurelles supplémentaires qui rendent le widget fonctionnel, telles que la taille, le contenu, etc. Marges, marges, positionnement, flotteur. La feuille de style de chaque plug-in se trouve dans le dossier themes/base et est nommée en fonction du plug-in, par exemple "jquery.ui.accordion.css". Ces styles doivent être modifiés avec soin car ils fournissent, avec le script, des remplacements des styles de cadre.

Nous encourageons tous les développeurs à créer des plug-ins jQuery. Le framework CSS jQuery UI permet aux utilisateurs finaux de personnaliser plus facilement les thèmes et d'utiliser les plug-ins.

Theming

Vous trouverez ci-dessous trois méthodes générales de création de thèmes pour les plugins jQuery UI :

  • Téléchargez le thème ThemeRoller : le premier La façon de créer un thème consiste à utiliser ThemeRoller pour générer et télécharger un thème. Cette application créera un nouveau fichier ui.theme.css et un dossier images contenant toutes les images d'arrière-plan et les sprites d'icônes nécessaires. Cette approche est la manière la plus ancienne de créer et de gérer des thèmes, mais elle limite la personnalisation aux options disponibles dans ThemeRoller.

  • Modifier les fichiers CSS : Pour un contrôle supplémentaire sur l'apparence et la convivialité, vous pouvez choisir de commencer avec le thème par défaut (Smoothness), ou de commencer avec un thème généré par ThemeRoller , puis ajustez le fichier ui.theme.css, ou la feuille de style de n'importe quel plug-in indépendant. Par exemple, vous pouvez facilement ajuster le rayon d'angle de tous les boutons à une valeur différente de celle des autres composants de l'interface utilisateur, ou modifier le chemin d'un sprite d'icône à l'aide de paramètres personnalisés. Avec un peu de styles, vous pouvez même utiliser plusieurs thèmes simultanément dans une seule interface utilisateur. Pour faciliter la maintenance, il est recommandé de modifier uniquement les ui.theme.css fichiers et images.

  • Réécrire le CSS personnalisé : Pour un contrôle maximal sur l'apparence, vous pouvez repartir de zéro et écrire le CSS de chaque plugin sans utiliser de classes de framework ou de feuille de style de plugin spécifique. . Cette approche peut être utilisée si l'apparence souhaitée ne peut pas être obtenue en modifiant le CSS ou en utilisant un balisage hautement personnalisé. Cette approche nécessite une expertise approfondie en CSS et nécessite une mise à jour manuelle des futurs plugins.

Utilisez ThemeRoller, le framework CSS jQuery UI et concevez des thèmes personnalisés

  • jQuery UI ThemeRoller

  • API du framework CSS jQuery UI

  • Thème de conception