Mise en route avec jQuery UI

lien Qu’est-ce que jQuery UI?

jQuery UI est une bibliothèque de widgets et d’interactions construite au-dessus de la bibliothèque JavaScript jQuery que vous pouvez utiliser pour créer des applications Web hautement interactives. Ce guide est conçu pour vous familiariser avec le fonctionnement de l’interface utilisateur jQuery. Suivez ci-dessous pour commencer.

lien Commencez par Consulter les Démos

Pour avoir une idée de ce dont l’interface utilisateur jQuery est capable, consultez les démos de l’interface utilisateur.

Dans la section démos, la navigation répertorie toutes les interactions et widgets proposés par jQuery UI. Choisissez une interaction ou un widget et plusieurs configurations de démonstration vous seront présentées pour ce plugin particulier. Chaque démo vous permet d’afficher le code source, de changer de thème et l’URL peut toujours être mise en signet. Par exemple, consultez la page de démonstration de l’espace de remplissage du widget accordéon.

lien Créez votre téléchargement personnalisé de l’interface utilisateur jQuery

Une fois que vous avez une compréhension de base de ce qu’est l’interface utilisateur jQuery et de ce qu’elle fait, vous êtes prêt à l’essayer! Il est temps de vous rendre sur le générateur de téléchargement sur le site Web de l’interface utilisateur jQuery pour télécharger une copie de l’interface utilisateur jQuery. Le générateur de téléchargement de jQuery UI vous permet de choisir les composants que vous souhaitez télécharger et d’obtenir une version personnalisée de la bibliothèque pour votre projet. Il y a trois étapes simples pour créer votre téléchargement personnalisé de l’interface utilisateur jQuery:

lien Étape 1: Choisissez les composants dont Vous avez besoin

La colonne principale du Générateur de téléchargement répertorie tous les composants JavaScript de l’interface utilisateur jQuery classés en groupes: noyau, interactions, widgets et effets. Certains composants de l’interface utilisateur jQuery dépendent d’autres composants. Cochez simplement les cases des widgets que vous souhaitez télécharger et toutes les dépendances requises seront également automatiquement cochées. Les composants que vous sélectionnez seront tous combinés dans un fichier JavaScript jQuery UI personnalisé.

lien Étape 2: Sélectionnez un Thème (ou Lancez votre Propre Thème personnalisé)

Dans la colonne de droite du Générateur de téléchargement, vous trouverez un champ dans lequel vous pouvez choisir parmi un certain nombre de thèmes prédéfinis pour vos widgets d’interface utilisateur jQuery.Vous pouvez choisir parmi les différents thèmes que nous fournissons, ou vous pouvez concevoir votre propre thème personnalisé en utilisant ThemeRoller (plus à ce sujet plus tard).

Paramètres de thème avancés: La section thème du générateur de téléchargement propose également des paramètres de configuration avancés pour votre thème. Si vous prévoyez d’utiliser plusieurs thèmes sur une seule page, ces champs vous seront utiles. Si vous prévoyez d’utiliser un seul thème sur une page, vous pouvez ignorer entièrement ces paramètres.

lien Étape 3: Choisissez une version de jQuery UI

La dernière étape du générateur de téléchargement consiste à sélectionner un numéro de version. Assurez-vous de vérifier non seulement la version de l’interface utilisateur jQuery que vous choisissez, mais également la version de jQuery Core prise en charge par cette version, car différentes versions de la bibliothèque prennent en charge différentes versions de jQuery. Pour plus d’informations sur les nouveautés de chaque version de l’interface utilisateur jQuery, consultez les guides de mise à niveau et les journaux de modifications du projet.

lien Cliquez sur Télécharger!

Vous avez terminé avec le générateur de téléchargement! Cliquez sur le bouton télécharger et vous obtiendrez un fichier zip personnalisé contenant tout ce que vous avez sélectionné.

lien Aperçu de base: À l’aide de l’interface utilisateur jQuery sur une page Web

Ensuite, ouvrez index.html à partir du zip téléchargé dans un éditeur de texte. Vous verrez qu’il fait référence à votre thème, à jQuery et à l’interface utilisateur jQuery. En règle générale, vous devrez inclure ces trois fichiers sur n’importe quelle page pour utiliser les widgets et interactions de l’interface utilisateur jQuery:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

Une fois que vous avez inclus les fichiers nécessaires, vous pouvez ajouter des widgets jQuery à votre page. Par exemple, pour créer un widget datepicker, vous allez ajouter un élément de saisie de texte à votre page, puis appeler .datepicker() dessus. Comme ceci :

HTML:

<input type="text" name="date">

JavaScript:

$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

lier la personnalisation de l’interface utilisateur jQuery à Vos besoins

L’interface utilisateur jQuery vous permet de la personnaliser de plusieurs manières. Vous avez déjà vu comment le générateur de téléchargement vous permet de personnaliser votre copie de l’interface utilisateur jQuery pour n’inclure que les parties souhaitées, mais il existe d’autres moyens de personnaliser ce code en fonction de votre implémentation.

lien Bases de l’interface utilisateur jQuery: Utilisation des options

Chaque plugin de l’interface utilisateur jQuery a une configuration par défaut adaptée au cas d’utilisation le plus basique et le plus courant. Mais si vous souhaitez qu’un plugin se comporte différemment de sa configuration par défaut, vous pouvez remplacer chacun de ses paramètres par défaut en utilisant « options ». Les options sont un ensemble de propriétés passées dans un widget d’interface utilisateur jQuery en tant qu’argument. Par exemple, le widget curseur dispose d’une option d’orientation qui vous permet de spécifier si le curseur doit être horizontal ou vertical. Pour définir cette option pour un curseur sur votre page, il vous suffit de la passer en argument, comme ceci:

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

You can pass as many different options as you’d like by following each one with a comma (except the last one):

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

N’oubliez pas d’entourer vos options avec des accolades { }, et vous êtes en bonne voie. Bien sûr, l’exemple ci-dessus touche à peine à ce que vous pouvez faire avec l’interface utilisateur jQuery. Pour obtenir des informations détaillées sur l’ensemble des widgets de l’interface utilisateur jQuery, consultez la documentation de l’interface utilisateur jQuery.

lien Personnalisation visuelle: Conception d’un thème jQuery UI

Si vous souhaitez concevoir votre propre thème, jQuery UI dispose d’une application très simple à cet effet. Il s’appelle ThemeRoller, et vous pouvez toujours y accéder en cliquant sur le lien « Thèmes » dans la navigation de l’interface utilisateur jQuery, ou simplement en allant sur ThemeRoller de l’interface utilisateur jQuery.

ThemeRoller fournit une interface personnalisée pour la conception de tous les éléments utilisés par les widgets de l’interface utilisateur jQuery. Lorsque vous ajustez les « leviers » dans la colonne de gauche, les widgets de droite refléteront votre conception. L’onglet Galerie de ThemeRoller propose un certain nombre de thèmes prédéfinis (les mêmes que ceux proposés par le Générateur de téléchargement) que vous pouvez modifier ou télécharger tels quels.

lien Téléchargeant votre Thème

Lorsque vous cliquez sur le bouton « Télécharger le thème » dans ThemeRoller, vous serez dirigé vers le Générateur de téléchargement et votre thème personnalisé sera automatiquement sélectionné dans le menu déroulant du Thème. Vous pouvez configurer votre package de téléchargement plus loin à partir de là. Une fois que vous avez téléchargé, vous verrez que la page example.html est stylée à l’aide de votre thème personnalisé.

Conseil rapide: Si jamais vous avez besoin de modifier votre thème, ouvrez simplement le fichier CSS et trouvez où il est écrit « Pour afficher et modifier ce thème, visitez… »Cette URL ouvrira le thème dans ThemeRoller pour l’édition.

Support De lien: Où Puis-Je Obtenir De L’Aide?