Découvrez la puissance de jQuery UI

Extrait du cours découvrez la puissance de jQuery UI

…….
Utilitaires
Dernier point que j’aimerais aborder avant de nous lancer : les logiciels et les liens utiles au développement en jQuery. En effet, on se retrouve parfois, et même souvent, à ne savoir que faire lorsqu’un de nos codes ne fonctionne pas. Pour cela, il existe plusieurs solutions :
Consulter la documentation.
S’aider d’un débogueur.
Demander de l’aide.
Avant d’en arriver à la troisième option, il est nécessaire de chercher par soi-même. En faisant cela, on comprend mieux une erreur et cela nous permet de ne plus la faire. On en retire aussi une satisfaction plus conséquente.
Utiliser la documentation
Il ne faut surtout pas la négliger ; si elle peut paraître difficile à aborder pour certaines personnes, elle est pourtant très complète.
Je sais que la documentation officielle est écrite en anglais, cependant, un webmaster francophone a mis en place une traduction sur son site web. Vous pourrez la retrouver sur cette page, donc n’hésitez surtout pas à vous en servir.
Les différentes fonctionnalités de la librairie sont triées suivant leur rôle et leur catégorie.
Firebug, une extension Firefox très utile
Vous connaissez sûrement Firebug, une extension pour le navigateur Mozilla Firefox, qui est célèbre parmi les développeurs.
C’est un plugin très puissant qui prend en charge beaucoup de fonctions, et vous permettra de déceler les erreurs de votre code jQuery.
Si vous êtes un utilisateur de Google Chrome, sachez qu’il existe un équivalent à Firebug de Mozilla Firefox. C’est une extension appelée Firebug Lite.
Pour une explication poussée, je vous invite à aller lire ce très bon article.
Votre cerveau est maintenant à jour ! Les prochains chapitres seront bien plus techniques et passionnants, vous pouvez me croire, et vous serez étonné de ce qu’on peut faire avec jQuery UI. Certaines choses étaient réputées impossibles à faire sans l’utilisation de Flash, jusqu’à ce qu’arrive notre librairie préférée. Pas de doute, vous allez aimer.
Le ThemeRoller
Je sais que vous êtes vraiment impatient de commencer à voir à quoi ressemblent concrètement les plugins de jQuery UI (et pour cause), mais avant, nous allons étudier un outil mis à disposition par le site officiel. Intitulé ThemeRoller, cet éditeur de thème très pratique va nous permettre de customiser notre thème. J’en avais parlé brièvement dans le premier chapitre de ce tutoriel, et j’aimerais revenir dessus.
C’est le dernier chapitre de cette première partie, alors courage !
Réglages principaux
Le ThemeRoller se décompose en plusieurs parties. À votre gauche se trouvent les différents éléments modifiables. C’est ici que l’on va entrer nos propres données. Le contenu principal de la page montre les différents plugins, dont le design est celui de base. Les modifications seront exécutées en temps réel, bien que ce soit parfois un peu lent à apparaître. Mais on ne va pas faire les fines bouches, n’est-ce pas ?
Les « font settings »
Les « font settings », dont la traduction française est « réglages de la police », vont nous permettre comme leur nom l’indique de modifier les propriétés de la police des fameux plugins. Par défaut, la police est en Verdana (Arial, sans-serif), de taille 1.1 em et n’est pas en gras.
………

Sommaire: Découvrez la puissance de jQuery UI

Découvrez la puissance de jQuery UI
Partie 1 : Pré-requis et installations
Introduction
Présentation et rappels
Accessibilité et compatibilité
Les librairies
Architecture des fichiers
Mise en place des fichiers
Préparons-nous encore un peu
Petit rappel des fonctions jQuery
Les plugins
Utilitaires
Le ThemeRoller
Réglages principaux
Éléments cliquables, overlays et shadows
Éléments cliquables
Les « overlays »
Les « shadows »
Mettre en place notre thème
Partie 2 : Les interactions
Le Drag & Drop
Définitions
Allons plus loin
Le plugin Draggable
La fonctionnalité par défaut
Améliorons notre effet
Le plugin Droppable
La fonction par défaut
Sélection et redimension
Mise au point
Redimensionnez vos éléments
Améliorons notre effet
Sélection d’éléments
Initialisons le plugin
Amusons-nous avec les évènements
Mini-TP : réalisation d’un petit panier
But du jeu
Indications supplémentaires
Correction
Organisez votre page facilement
Principes de fonctionnement
Jouons avec les paramètres
Maîtriser les évènements de ce plugin
TP : une galerie d’images
Pré-requis et explications
Objectifs
Coups de pouce
Correction !
Avant d’attaquer le Javascript
Du côté jQuery
Améliorations
Partie 3 : Les widgets et les effets
Un menu en accordéon
Qu’est-ce qu’un menu en accordéon ?
Paramètres et évènements
Mettre en place le menu en accordéon
Étude des principaux paramètres
Les évènements
Mémoriser l’état des sections
Gérer les cookies avec jQuery
Mémorisation de la section ouverte
La barre de progression
Modalités et explications
Mettre en place le plugin
Animer le plugin
Utilisons la fonction setTimeout()
La fonction de rafraîchissement
Réalisation d’un système d’upload
Uploader un fichier avec HTML5 et Javascript
Quand jQuery UI s’en mêle
L’autocomplétion

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Découvrez la puissance de jQuery UI (1,29 MO) (Cours PDF)