jQuery UI et ThemeRoller

• Mai 3, 2024

Si vous voulez un moyen simple et rapide de concevoir l'interface utilisateur pour un site Web ou une application Web et inclure également jQuery, consultez jQuery UI. Vous y trouverez un package combo clé en main de fonctions CSS et jQuery qui facilite l'ajout de ces fonctionnalités à votre nouveau projet.

Faisons une promenade à travers le site. Sous le lien Démos et documents, vous trouverez une liste des plugins interactifs jQuery tels que le glisser-déposer, les onglets et les transitions. Pour chaque plugin, il existe une démo, une documentation et un exemple de code couper-coller pour les tests.

Si vous souhaitez récupérer les fichiers clé en main, cliquez sur le lien Thèmes pour le jQuery ThemeRoller. Le CSS par défaut est un thème blanc et gris nu. Vous pouvez cliquer sur le bouton de téléchargement et l'utiliser tel quel, mais il existe également une galerie de thèmes colorés pour vous aider à démarrer. Dans la zone Galerie, il existe plusieurs vignettes de thème. Cliquez simplement sur celui que vous aimez. Vous pouvez télécharger ce thème tel quel en cliquant sur l'onglet Roll Your Own puis sur le bouton Download Theme. Mais le plaisir commence lorsque vous commencez à tweeter le thème avec le moteur ThemeRoller. Il y a 11 options que vous pouvez personnaliser. La plupart des options vous permettront de modifier la texture et la couleur d'arrière-plan, la couleur de la bordure et les couleurs du texte et des icônes.

Vous avez plusieurs options pour tweeter le thème.

• Paramètres de police: vous pouvez modifier la famille de polices, le poids et la taille.
  
  
• Rayon d'angle: vous pouvez modifier le rayon d'angle. Chaque thème a un style d'onglet arrondi par défaut, mais ici, vous pouvez modifier la taille du coin ou le mettre à zéro pour un onglet carré. (Les onglets sont construits sur CSS3, qui n'est pas pris en charge par IE pour le moment.)
  
  
• En-tête / barre d'outils: vous pouvez définir les valeurs de couleur pour la zone derrière les onglets et les zones d'en-tête, comme pour le plug-in de calendrier.
  
  
• Contenu: vous pouvez définir ici les couleurs de la zone de contenu principale. Vous pouvez obtenir un design très différent selon votre choix de bordure ou pas de bordure.
  
  
• État par défaut cliquable: cela contrôle l'apparence par défaut (inactive) des onglets et des boutons.
  
  
• État de vol stationnaire cliquable: ces commandes concernent l'apparence des onglets et des boutons à l'état de vol stationnaire.
  
  
• État actif cliquable: contrôle l'apparence de l'onglet et du bouton de la page active.
  
  
• Surbrillance: les couleurs d'arrière-plan, de bordure, de texte et d'icône pour les zones en surbrillance.
  
  
• Erreur: couleurs d'arrière-plan, de bordure, de texte et d'icône pour les messages d'erreur.
  
  
• Écran modal pour les superpositions: contrôle la couleur et la texture de l'arrière-plan.
  
  
• Ombres portées: contrôle l'opacité, l'épaisseur, le décalage et les coins de l'ombre pour un effet d'ombre portée.
  
  

Lorsque vous téléchargez le jquery-ui-x.x.xx.custom.zip et montez le paquet, vous verrez trois dossiers (css, development-bundle et js) et un fichier index.html. Le fichier index.html est une démonstration des plugins stylisés avec votre thème. Vous souhaiterez placer les dossiers css et js dans votre répertoire principal et copier / coller le code du fichier index.html dans le code de votre site à l'emplacement où vous souhaitez que les plugins apparaissent.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Instructions Vidéo: Theming Theme Roller Customizations in JQuery UI (Mai 2024).