jQuery UI Personnalisation

jQuery UI propose plusieurs façons de personnaliser. Vous avez déjà vu comment le Générateur de téléchargement crée une version personnalisée qui inclut uniquement les options dont vous avez besoin. Voici d'autres méthodes de personnalisation.

Notions de base de jQuery UI : Utilisation des options

Chaque plugin de jQuery UI possède une configuration par défaut, et les valeurs de configuration par défaut sont généralement définies en fonction des cas d'utilisation les plus simples et les plus courants. Si vous souhaitez qu'un plugin utilise des valeurs non par défaut, vous pouvez remplacer ses valeurs par défaut avec des "options". Les options sont un ensemble de propriétés passées comme arguments aux widgets jQuery UI. Par exemple, le widget slider possède une option orientation qui vous permet de spécifier si le slider est horizontal ou vertical. Pour définir cette option pour le slider, il vous suffit de la passer comme argument, comme indiqué ci-dessous :

$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

Vous pouvez passer plusieurs options, en les séparant par une virgule :

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

N'oubliez pas que les options doivent être placées entre accolades{ }. L'exemple ci-dessus n'est qu'une explication simple. Pour des informations détaillées sur l'ensemble complet des widgets jQuery UI, veuillez consulterjQuery UI Examples。

Personnalisation visuelle : concevoir un thème jQuery UI

Si vous souhaitez concevoir votre propre thème, jQuery UI fournit une application parfaite pour la personnalisation de thème, appelée ThemeRoller. Pour une personnalisation spécifique, veuillez consulterjQuery UI ThemeRoller。

ThemeRoller fournit une interface de personnalisation pour tous les éléments mis en forme par les widgets jQuery UI. Lorsque vous ajustez les "leviers" dans la colonne de gauche, les widgets de la colonne de droite se mettent à jour selon votre conception. L'onglet Galerie de ThemeRoller propose plusieurs thèmes conçus, tout comme ceux de la page Download Builder. Vous pouvez ajuster ces thèmes ou les télécharger directement.

Télécharger le thème

Lorsque vous cliquez sur le bouton "Télécharger le thème" de la page ThemeRoller, vous serez redirigé vers la page Download Builder, où votre thème personnalisé est automatiquement sélectionné dans le menu déroulant des thèmes. Vous pouvez configurer davantage le package de téléchargement. Une fois le téléchargement terminé, vous verrezexample.htmlla page utilise votre thème personnalisé.

Astuce : Si vous devez modifier votre thème, ouvrez simplement le fichier CSS, trouvez la ligne 43, "To view and modify this theme, visit ...". Cette URL est le lien pour ouvrir le thème dans ThemeRoller en vue de le modifier.