jQuery UI thème
Tous jQuery UI plug-in permet aux développeurs d'intégrer de façon transparente des widgets de l'interface utilisateur à l'aspect et la convivialité de leurs sites ou applications. Chaque widget est défini par des styles CSS, et contient deux informations de style: les standards cadres jQuery UI CSS styles et plug-in style spécifique.
framework jQuery UI CSS fournit une représentation sémantique de la classe pour indiquer le rôle d'un petit éléments constitutifs, tels que le titre, le contenu, ou de la zone cliquable. Ceux - ci sont conformes à toutes les petites pièces, et un onglet cliquable (onglet), accordéon (accordéon) ou le bouton (Button) ont la même ui-state-default par ui-state-default , la classe, pour montrer qu'ils sont cliquables a. Lorsque l'utilisateur passe au - dessus de ces éléments, la classe devient ui-state-hover , ces éléments deviennent élu en ui-state-active . La classe de cohérence rend l'apparence des performances constantes de l'ensemble des éléments ou des composants ayant un rôle similaire dans l'état d'interaction.
cadre de style CSS est encapsulé dans un fichier séparé, nommé ui.theme.css . Ce fichier par ThemeRoller application à modifier. style de cadre ne contient que affectent l'apparence et la sensation de la propriété, aussi longtemps que les couleurs, les images d'arrière-plan, des icônes et ainsi de suite. Donc, ce sont le style «sûr», il ne sera pas affecter la fonction de plug-in. Cette séparation signifie que les développeurs peuvent utiliser dans theme.css modifier les fichiers de couleur et d' image pour créer un look personnalisé et la sensation. Puisque l'avenir de plug-ins ou corrections de bugs seront disponibles, et ceux-ci peuvent être utilisés sans modification par le thème.
Étant donné que le couvercle de style de cadre seulement regarder et sentir, il doit inclure plug-in spécifique des feuilles de style, ces feuilles de style comprennent tous les widgets supplémentaires permettent les règles de style structure fonctionnels, tels que la taille, rembourrage, les marges, positionnement, flotteur. Chaque stylesheets widget themes/base dossier, avec le "jquery.ui.accordion.css" plug-in nom, par exemple. Ces modèles doivent être édités avec soin scripts car ils fournissent un cadre couvrant les styles ensemble.
Nous encourageons tous les développeurs de créer des plug-in jQuery, jQuery UI cadre CSS rend plus facile pour les utilisateurs finaux d'utiliser des thèmes personnalisés et les plug-ins.
theming
Voici trois du widget jQuery UI relative à la procédure générale:
- Télécharger sujets ThemeRoller: d' abord créer un thème est d'utiliser ThemeRoller pour générer et télécharger un thème. Cette application va créer un nouveau
ui.theme.cssfichier et contient toutes les images de fond nécessaires et les icônes spriteimagesdossier. Cette méthode est la première à créer et à maintenir le thème de la route, mais les options qu'elle offre ThemeRoller personnalisée limitée. - Modifiez le fichier CSS: Afin de favoriser l'aspect et la convivialité des commandes, vous pouvez choisir parmi le thème par défaut (Finesse) commence, ou d'un sujet généré par le ThemeRoller Démarrer, puis ajuster
ui.theme.cssfichier, un plug-in séparé ou tout stylesheet. Par exemple, vous pouvez facilement ajuster l'angle du rayon de tous les boutons est différente des valeurs des autres composants de l'interface utilisateur, ou d'utiliser une icône personnalisée pour changer l'assistant de chemin. Les styles varient à travers un peu, vous pouvez même utiliser plus d'un thème dans une interface utilisateur. Pour faciliter la maintenance, la modification proposéeui.theme.cssfichiers et images. - Réécrivez CSS personnalisé: Pour maximiser le contrôle du look and feel, vous pouvez commencer à écrire à nouveau sur chaque widgets et CSS, sans l'utilisation de classes du framework plug-in ou une feuille de style spécifique. Si vous voulez regarder et toucher peut être obtenu en modifiant le CSS ou en utilisant des balises très personnalisées, vous pouvez utiliser cette méthode. Cette approche nécessite une expertise approfondie en termes de CSS, et nécessitent des mises à jour manuelles pour un futur plug-ins.