Decouvrez La Puissance de Jquery Ui PDF

Dcouvrez la puissance de jQuery UI
Par Sainior
www.siteduzero.com
Licence Creative Commons 6 2.0 Dernire mise jour le 19/04/2012
2/68
Sommaire
Sommaire ........................................................................................................................................... Partager .............................................................................................................................................. Dcouvrez la puissance de jQuery UI ................................................................................................ Partie 1 : Pr-requis et installations ....................................................................................................
Prsentation et rappels ............................................................................................................................................................................................... Accessibilit et compatibilit ....................................................................................................................................................................................... Les librairies ................................................................................................................................................................................................................ Architecture des fichiers .............................................................................................................................................................................................. Mise en place des fichiers ...........................................................................................................................................................................................
2 2 4 5
5 5 6 7 7
Introduction ........................................................................................................................................................................ 5
Prparons-nous encore un peu ......................................................................................................................................... 9

Petit rappel des fonctions jQuery .............................................................................................................................................................................. 10 Les plugins ................................................................................................................................................................................................................ 12 Utilitaires ................................................................................................................................................................................................................... 13
Le ThemeRoller ............................................................................................................................................................... 13
Rglages principaux .................................................................................................................................................................................................. lments cliquables, overlays et shadows ................................................................................................................................................................ lments cliquables .................................................................................................................................................................................................. Les "overlays" ............................................................................................................................................................................................................ Les "shadows" ........................................................................................................................................................................................................... Mettre en place notre thme ..................................................................................................................................................................................... 14 15 15 16 16 17
Partie 2 : Les interactions ................................................................................................................. 17

Le Drag & Drop ............................................................................................................................................................... 18
Dfinitions ................................................................................................................................................................................................................. 18 Allons plus loin .......................................................................................................................................................................................................... 18 Le plugin Draggable .................................................................................................................................................................................................. 18 La fonctionnalit par dfaut ....................................................................................................................................................................................... 18 Amliorons notre effet ............................................................................................................................................................................................... 19 Le plugin Droppable .................................................................................................................................................................................................. 22 La fonction par dfaut ................................................................................................................................................................................................ 22
Slection et redimension ................................................................................................................................................. 25

Mise au point ............................................................................................................................................................................................................. Redimensionnez vos lments ................................................................................................................................................................................. Amliorons notre effet ............................................................................................................................................................................................... Slection d'lments ................................................................................................................................................................................................. Initialisons le plugin ................................................................................................................................................................................................... Amusons-nous avec les vnements ....................................................................................................................................................................... Mini-TP : ralisation d'un petit panier ........................................................................................................................................................................ But du jeu .................................................................................................................................................................................................................. Indications supplmentaires ...................................................................................................................................................................................... Correction .................................................................................................................................................................................................................. 25 25 25 28 28 29 31 31 31 31
Organisez votre page facilement .................................................................................................................................... 33

Principes de fonctionnement ..................................................................................................................................................................................... 34 Jouons avec les paramtres ..................................................................................................................................................................................... 34 Matriser les vnements de ce plugin ...................................................................................................................................................................... 37
TP : une galerie d'images ................................................................................................................................................ 38

Pr-requis et explications .......................................................................................................................................................................................... Objectifs .................................................................................................................................................................................................................... Coups de pouce ........................................................................................................................................................................................................ Correction ! ................................................................................................................................................................................................................ Avant d'attaquer le Javascript ................................................................................................................................................................................... Du ct jQuery .......................................................................................................................................................................................................... Amliorations ............................................................................................................................................................................................................ 39 39 39 41 41 42 46
Partie 3 : Les widgets et les effets .................................................................................................... 46

Un menu en accordon ................................................................................................................................................... 47
Qu'est-ce qu'un menu en accordon ? ...................................................................................................................................................................... 47 Paramtres et vnements ....................................................................................................................................................................................... 47 Mettre en place le menu en accordon ..................................................................................................................................................................... 47 tude des principaux paramtres ............................................................................................................................................................................. 48 Les vnements ........................................................................................................................................................................................................ 51 Mmoriser l'tat des sections .................................................................................................................................................................................... 52 Grer les cookies avec jQuery .................................................................................................................................................................................. 52 Mmorisation de la section ouverte .......................................................................................................................................................................... 52
La barre de progression .................................................................................................................................................. 54

Modalits et explications ........................................................................................................................................................................................... 55 Mettre en place le plugin ........................................................................................................................................................................................... 55 Animer le plugin ........................................................................................................................................................................................................ 55 Utilisons la fonction setTimeout() .............................................................................................................................................................................. 55 La fonction de rafrachissement ................................................................................................................................................................................ 56 Ralisation d'un systme d'upload ............................................................................................................................................................................ 56 Uploader un fichier avec HTML5 et Javascript .......................................................................................................................................................... 57 Quand jQuery UI s'en mle ....................................................................................................................................................................................... 57
L'autocompltion ............................................................................................................................................................. 58
www.siteduzero.com
Sommaire
3/68
59 59 60 60 62 62 62 66
Principes ................................................................................................................................................................................................................... Mise en place ............................................................................................................................................................................................................ Options et vnements ............................................................................................................................................................................................. Paramtres utiles du plugin ....................................................................................................................................................................................... Travaillons les vnements ....................................................................................................................................................................................... Rcuprer une liste externe ...................................................................................................................................................................................... Rcuprer des donnes depuis un service externe votre site web ........................................................................................................................ Rcuprer des donnes depuis une liste personnelle ..............................................................................................................................................
www.siteduzero.com
Sommaire
4/68

Le tutoriel que vous tes en train de lire est en bta-test. Son auteur souhaite que vous lui fassiez part de vos commentaires pour l'aider l'amliorer avant sa publication officielle. Notez que le contenu n'a pas t valid par l'quipe ditoriale du Site du Zro.
Par
Sainior
Mise jour : 19/04/2012 Difficult : Intermdiaire
Dure d'tude : 20 jours
1 126 visites depuis 7 jours, class 113/797 Il est maintenant courant d'utiliser des librairies Javascript telles que Prototype, Mootools, ou jQuery. En effet, elles permettent un gain de temps norme lors du dveloppement d'un site web, et leur apprentissage est d'une facilit exceptionnelle. De plus, beaucoup de casses-ttes tels que la compatibilit entre navigateurs et l'accessibilit sont rsolus automatiquement ! Le dveloppement de ces scripts miracles a entran la cration de petits modules externes utilisant jQuery et permettant leur utilisateur de ne pas devoir r-inventer la roue chaque projet. C'est le cas de jQuery UI, qui concentre plusieurs plugins trs pratiques tels que le Slider, le Datepicker ou la Progressbar. Cependant, il est parfois difficile et droutant de se servir de jQuery UI, surtout lorsque l'on commence utiliser cette librairie. Je suis donc l pour vous apprendre les rudiments de ces fabuleuses choses que sont les interfaces utilisateur de jQuery ! Il est obligatoire de connatre les bases de la librairie jQuery et du langage Javascript, car je ne m'attarderai pas longtemps dessus. De mme, une parfaite connaissance de la smantique HTML5 est requise, et des facilits en AJAX sont un gros plus.
www.siteduzero.com
5/68
Partie 1 : Pr-requis et installations

Tout cela reste tout de mme bien vague ! C'est pourquoi nous allons, dans cette premire partie, voir les bases qui nous permettront plus tard de raliser des choses plus complexes grce jQuery UI. Au programme : prsentation de la librairie, fonctionnement des diffrents fichiers, et mise en place de notre thme.
Introduction
Le tutoriel commence ici. J'espre que vous apprcierez d'apprendre utiliser jQuery UI, car croyez-moi, cette petite bte devient de plus en plus utilise. Mme le Site du Zro, sur lequel vous vous trouvez en ce moment, n'hsite pas exploiter sa puissance ! Avant de commencer entrer dans le cur du sujet, il est ncessaire d'tre prpar. En effet, la prparation est une tape trs importante dans la vie d'un dveloppeur, de mme que l'organisation. C'est pourquoi il ne faut pas se lancer dans la conception d'un site web sans avoir rflchi certaines questions avant, moins d'avoir un fabuleux clair de gnie. Ce chapitre est donc consacr la mise en place des librairies dans nos pages ; en effet, jQuery UI a une architecture particulire, et il convient de connatre son fonctionnement pour l'utiliser correctement.
Prsentation et rappels
Si vous avez dj fait un peu de jQuery, vous connaissez la syntaxe du langage. En effet, les crateurs de la librairie jQuery ont pens une manire efficace et rapide de manipuler le DOM, les vnements et beaucoup d'autres choses. Ainsi, pour rappel, au lieu de faire ceci en Javascript pur : Code : JavaScript var id = document.getElementById('idDiv'); id.style.width = '150px';
On fera simplement cela en jQuery : Code : JavaScript $('#idDiv').css({ width : '150px' });
Cela a le mrite d'tre trs lisible, surtout lorsqu'un code fait plusieurs centaines de lignes ! Si vous connaissez peu, ou pas du tout, jQuery, je vous invite aller lire un tutoriel vous expliquant ses bases.
Seulement, les crateurs de jQuery ont voulu aller encore plus loin en dveloppant jQuery UI. C'est une sorte de super-librairie, qui peut tre considre comme un complment jQuery. Elle prend en charge ce qu'on appelle des interfaces utilisateur, qui permettent une interactivit accrue avec le visiteur du site web, et facile mettre en place. Mais ne vous y trompez pas : c'est encore et toujours du Javascript ! Nous allons donc, au long de ce tutoriel, apprendre utiliser ces UI bon escient, afin de booster formidablement l'interactivit de votre site web.
Accessibilit et compatibilit
Une grande question souvent pose, lorsqu'il s'agit d'utiliser une librairie, c'est de savoir si nos codes seront compatibles partout. De mme, jQuery UI construit lui-mme la structure HTML dont il a besoin pour fonctionner, et ce pour chacun des plugins qu'il prend en charge. Eh bien, sachez-le ds maintenant, vous n'avez presque pas de soucis vous faire concernant tout cela ! En effet, jQuery et jQuery UI sont supports par pratiquement tous les navigateurs, hormis les trs vieilles versions d'Internet Explorer. Navigateurs Compatibilit
Internet Explorer 6 et plus Oui Firefox 2 et plus Oui
www.siteduzero.com

Opera 9 et plus Safari 3 et plus Google Chrome Oui Oui Oui
6/68
La structure HTML gnre est vraiment trs propre et valide W3C, ce qui vous assure un confort maximal au niveau de l'accessibilit. De plus, pour les personnes ou les navigateurs ne supportant malheureusement pas Javascript, le contenu ne sera pas cach, vous assurant en plus de ne pas dissimuler des informations au robot de Google, ce qui est plutt bon pour votre rfrencement.
Les librairies
Comme vous devriez le savoir, une librairie est en fait un code externe cr et dvelopp par des gens trs dous, qui ont pour objectif d'aider les apprentis dveloppeurs que nous sommes. Ainsi, la librairie jQuery est prsente sous la forme d'un fichier Javascript de plusieurs milliers de lignes qui contient le fonctionnement interne de celle-ci. Il en va de mme pour jQuery UI (interfaces utilisateur), le code principal est contenu dans un seul et mme fichier, et ncessite l'inclusion de jQuery pour tre utilis. C'est donc un complment de la librairie "principale" : utiliser les interfaces utilisateur implique d'utiliser jQuery, mais utiliser jQuery n'implique pas forcment d'utiliser les interfaces utilisateur. V ous me suivez ? Si c'est un peu difficile comprendre, je vous invite regarder attentivement le schma ci-dessous :
On peut voir que la librairie principale, savoir jQuery, est incluse sur le fichier ma_page.html. Elle ne dpend en aucun cas de la librairie secondaire, savoir jQuery UI. En revanche, le contraire est vrai : les interfaces utilisateur, pour fonctionner, ont besoin de la librairie jQuery. Les interfaces utilisateur sont des modules trs pratiques qui peuvent faire la diffrence : en effet, ils permettent une plus grande interactivit entre le site web et son visiteur. Un utilisateur lambda prfrera une interface ergonomique, jolie, bien prsente,
www.siteduzero.com

rapide, pratique et utile. jQuery UI fournit toutes ces qualits. Ainsi, au terme de votre apprentissage, vous serez capable de raliser un espace membre avanc, des animations encore plus pousses que celles de jQuery, une ergonomie avance pour votre site web, et beaucoup d'autres choses ! Maintenant que nous avons clairci ces diffrents points, nous allons pouvoir commencer obtenir les diffrents fichiers.
7/68
Architecture des fichiers

Sans les librairies, difficile de les utiliser. Nous allons donc tlcharger les fichiers ncessaires sur le site officiel, puis nous tudierons l'architecture de jQuery UI et son inclusion dans une page web. Rendez-vous donc en premier lieu sur le site de jQuery UI, puis dans la section Download. Le site met disposition du dveloppeur la possibilit de customiser son pack de plugins, dans le cas o il ne voudrait pas toutes les fonctions de la librairie. De mme, un thme est fourni, vous permettant de ne pas avoir construire le style CSS des interfaces utilisateur depuis zro, le thme par dfaut tant "UI lightness" :
Il vous est galement possible de faire votre thme vous-mme en vous rendant sur cette page, et en tlchargeant ensuite le fichier. Un chapitre de cette premire partie est consacr l'utilisation de ce ThemeRoller.
Mise en place des fichiers

Comme nous allons tout utiliser au cours de ce tutoriel, nous allons tlcharger tous les fichiers proposs. Toutes les cases tant coches par dfaut sur le site, n'y touchez pas, et cliquez sur le bouton "Download" situ droite (prenez la dernire version, qui est actuellement l 1.8.18). Une fois l'archive rceptionne, dcompressez-la : vous obtenez un dossier js/ et un dossier development-bundle/. C'est dans ce dernier que se trouvent les plugins ; en effet, chaque fonction est place dans un fichier Javascript unique. Ce dossier contient plusieurs autres dossiers qui ne nous serviront pas. Je vous invite donc supprimer : le dossier demos/ ; le dossier docs/ ; et le dossier external/.
www.siteduzero.com
8/68
Une fois ceci fait, rendez-vous dans le dossier ui/. V ous pouvez remarquer que chaque fonction de la librairie est contenue dans une fichier Javascript unique. Il nous faudra par la suite inclure ceux qui nous intresseront pour pouvoir utiliser les fonctions que nous souhaitons. De mme, il nous faudra penser inclure les librairies dont nous avons besoin, savoir jQuery et le fichier principal de jQuery UI. Inclure le thme fourni par jQuery UI est trs recommand, mais pas obligatoire si vous crez votre propre fichier CSS. Je me suis permis de schmatiser grossirement ce que devrait tre le contenu de votre dossier de projet :
Attends, tu es en train de nous dire qu'on va devoir chaque fois inclure tous ces fichiers ?! Heureusement, il y a plus simple. Google a mis en place pour les dveloppeurs une bibliothque complte de librairies inclure directement sur vos pages. Les fichiers sont placs sur leurs serveurs, et ne prennent donc pas de place sur le vtre. Cela permet en plus un chargement plus rapide des diffrentes librairies grce une mise en cache, et diminue la bande passante de votre site web. Comme je suis une personne gentille et gnreuse, je vous donne le code HTML de base qui permet de charger les librairies depuis l'API Google : Code : HTML <!DOCTYPE html> <html> <head> <meta charset="iso-8859-1" /> <title>Votre titre</title>  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jqueryui.css" /> </head> <body>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jqueryui.min.js"></script> </body> </html>
www.siteduzero.com
9/68
V ous tes maintenant fin prt travailler ! Maintenant que vous tes par coder, nous allons commencer tudier plus concrtement jQuery UI. Cette librairie peut en fait se dcouper en trois grosses parties, et celles-ci composeront ce tutoriel. Mais avant d'tudier tout a, nous devons encore voir quelques petites choses ! Je vous invite donc vous rendre dans le prochain chapitre.
www.siteduzero.com
10/68
Prparons-nous encore un peu

Il nous reste encore quelques petites choses rgler avant de nous lancer dans la grande aventure. En effet, plus les habitudes et l'environnement de travail sont bons, plus rapide et efficace sera le dveloppement. C'est pourquoi j'aimerais clarifier quelques points, tels que l'utilisation de jQuery, son contexte, ou les bonnes mthodes adopter en Javascript. Si vous estimez tre parfaitement l'aise avec jQuery et que vous en tes un utilisateur chevronn, alors vous pouvez sauter ce chapitre.
Petit rappel des fonctions jQuery

Certaines fonctions jQuery sont trs utiles et nous permettront de gagner considrablement du temps. C'est le cas des vnements, des effets, et des fonctions utiles de la librairie. Cette sous-partie sera donc l'occasion pour moi de faire le point ldessus. jQuery met disposition des mthodes connatre absolument lorsqu'on dveloppe avec cette librairie. En voici un bref rappel.
La fonction jQuery()
C'est la principale fonction, qui peut tre abrge avec le signe $ (dollar). Elle permet d'indiquer que l'on utilise jQuery, et est utilise pratiquement tout le temps. Elle sert aussi nous assurer que le document HTML est bien charg avant d'utiliser nos fonctions. Durant tout le cours, nos codes jQuery seront placs dans la fonction suivante : Code : JavaScript $(function(){ // Ici se placera tout notre code });
La fonction attr()
Une des fonctions trs importantes de la librairie est la fonction attr(). En effet, elle permet de rcuprer, de modifier ou de supprimer n'importe quel attribut de l'lment sur lequel on l'utilise. Ainsi, si par exemple je veux rcuprer les valeurs contenues dans l'attribut alt d'une image, le code suivant sera adapt : Code : JavaScript // code contenu dans la fonction jQuery var attributAlt = $('img').attr('alt'); // si je voulais modifier cet attribut, je ferais ceci : $('img').attr('alt', 'Nouvelle valeur');
J'espre que vous connaissiez cette fonction, car nous allons l'utiliser trs souvent ! Pour supprimer un attribut d'un lment HTML, on prfrera utiliser removeAttr(), en indiquant en argument le nom de l'attribut supprimer.
addClass() et removeClass()
Ces fonctions permettent respectivement d'ajouter une valeur l'attribut class d'un lment HTML, ou d'en supprimer une. Il suffit de la spcifier en argument. Ainsi, le code suivant me permet d'ajouter la classe selected mes paragraphes : Code : JavaScript $('p').addClass('selected');
www.siteduzero.com
11/68
Si mon lment contenait dj une classe, celle-ci ne sera pas crase ; ma nouvelle classe sera simplement ajoute en complment la premire. Si je voulais ensuite la supprimer, il me suffirait de faire : Code : JavaScript $('p').removeClass('selected');
Rien de plus simple !
La fonction html()
Fonction trs utile que voici. En utilisant cette fonction, vous pourrez rcuprer ou modifier le contenu d'un lment HTML. Qu'il est loin le temps de innerHTML() ! Il nous suffit maintenant de taper le code suivant pour rcuprer le contenu de mon dernier paragraphe : Code : JavaScript // rcupre le contenu du dernier paragraphe trouv dans la variable "contenu" var contenu = $('p:last').html();
Si vous connaissez les bases de jQuery, vous savez srement ce que sont les slecteurs. Si a ne vous dit rien, je vous invite aller voir cette page qui dcrit fort bien les principaux slecteurs existants. Cette fonction retourne tout le contenu et j'insiste l-dessus : vous rcuprerez mme les balises HTML s'il y en a. Il est possible de modifier ce que l'lment HTML contient en spcifiant en argument ce que l'on veut insrer ; attention tout de mme, cela crasera tout le contenu existant et le remplacera.
La fonction text()
Cette fonction fait la mme chose que la fonction html(), mais ne retourne que les donnes textuelles. Ainsi, vous n'obtiendrez pas de balises HTML si vous rcuprez le contenu d'un lment HTML en contenant. Par exemple, j'ai un paragraphe contenant des balises <strong></strong>, comme ceci : Code : HTML <p><strong>Ceci est important</strong>, mais ceci ne l'est pas.</p>
Maintenant, en rcuprant le contenu du paragraphe avec text() : Code : JavaScript var contenu = $('p').text(); alert(contenu);
Cette alerte me renverra : Citation
www.siteduzero.com

Ceci est important, mais ceci ne l'est pas.
12/68
La fonction val()
Enfin, la dernire fonction que je voudrais revoir avec vous est la fonction val(). On l'utilise dans le contexte des formulaires, car elle permet de rcuprer et de modifier la valeur d'un lment. Ainsi, si je veux rcuprer puis modifier la valeur de l'attribut value d'un champ de texte, je taperai : Code : JavaScript // rcupration du contenu du champ de texte var inputText = $('input:text').val(); // modification du contenu du champ de text $('input:text').val('Nouvelle valeur');
C'est une fonction trs utile encore une fois, et nous l'utiliserons souvent tant donn que les formulaires sont trs prsents dans le domaine des interfaces utilisateur. Nous avons maintenant termin ce rappel des fonctions importantes de jQuery. J'insiste l-dessus, car ces mthodes sont fondamentales lorsqu'on utilise cette librairie, et je veux que tout le monde puisse me suivre durant ce tutoriel. Nous allons maintenant pouvoir passer la suite.
Les plugins
J'aimerais encore une fois faire le point sur une chose. J'estime que pour utiliser jQuery UI, qui rappelons-le est une srie de plugins (synonyme d'extensions), il faut connatre le fonctionnement d'une extension en Javascript. C'est comme a partout : en langage PHP, si vous ne connaissez pas le fonctionnement concret de la programmation oriente objet, vous ne serez pas en mesure d'exploiter toute la puissance d'un framework. En Javascript, il est possible de dvelopper ce qu'on appelle des plugins , que l'on appellera ensuite en tant que mthode sur nos diffrents lments. Par exemple, imaginons que j'ai cr un plugin permettant d'afficher "Bonjour" dans un lment donn. C'est inutile, mais c'est pour l'exemple. Dans ce cas, j'appellerai mon extension ainsi : Code : JavaScript $('p').direBonjour();
C'est le mode de fonctionnement des plugins de jQuery UI.
Les paramtres, ou options

Pour plus de possibilits, les crateurs des plugins de jQuery UI on mit en place tout un tas de paramtres pour manipuler tout cela notre aise. a nous permet donc une grande personnalisation. Pour l'exemple, en reprenant mon code prcdent et en imaginant que je dispose d'un paramtre me permettant de changer la langue dans laquelle est dite "Bonjour", je pourrais faire : Code : JavaScript $('p').direBonjour({ language : 'english' });
Mon paramtre language vaut prsent english. Un plugin peut avoir une infinit de paramtres. Pour approfondir le sujet, je vous invite aller lire ce trs bon tutoriel, disponible sur le Site du Zro.
www.siteduzero.com
13/68
Utilitaires
Dernier point que j'aimerais aborder avant de nous lancer : les logiciels et les liens utiles au dveloppement en jQuery. En effet, on se retrouve parfois, et mme 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 dbogueur. Demander de l'aide. Avant d'en arriver la troisime option, il est ncessaire de chercher par soi-mme. En faisant cela, on comprend mieux une erreur et cela nous permet de ne plus la faire. On en retire aussi une satisfaction plus consquente.
Utiliser la documentation
Il ne faut surtout pas la ngliger ; si elle peut paratre difficile aborder pour certaines personnes, elle est pourtant trs complte. Je sais que la documentation officielle est crite en anglais, cependant, un webmaster francophone a mis en place une traduction sur son site web. V ous pourrez la retrouver sur cette page, donc n'hsitez surtout pas vous en servir. Les diffrentes fonctionnalits de la librairie sont tries suivant leur rle et leur catgorie.
Firebug, une extension Firefox trs utile

V ous connaissez srement Firebug, une extension pour le navigateur Mozilla Firefox, qui est clbre parmi les dveloppeurs. C'est un plugin trs puissant qui prend en charge beaucoup de fonctions, et vous permettra de dceler 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 appele Firebug Lite. Pour une explication pousse, je vous invite aller lire ce trs bon article. V otre 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 rputes impossibles faire sans l'utilisation de Flash, jusqu' ce qu'arrive notre librairie prfre. Pas de doute, vous allez aimer.
www.siteduzero.com
14/68
Le ThemeRoller
Je sais que vous tes vraiment impatient de commencer voir quoi ressemblent concrtement 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 thme trs pratique va nous permettre de customiser notre thme. J'en avais parl brivement dans le premier chapitre de ce tutoriel, et j'aimerais revenir dessus. C'est le dernier chapitre de cette premire partie, alors courage !
Rglages principaux
Le ThemeRoller se dcompose en plusieurs parties. votre gauche se trouvent les diffrents lments modifiables. C'est ici que l'on va entrer nos propres donnes. Le contenu principal de la page montre les diffrents plugins, dont le design est celui de base. Les modifications seront excutes en temps rel, bien que ce soit parfois un peu lent apparatre. Mais on ne va pas faire les fines bouches, n'est-ce pas ?
Les "font settings"

Les "font settings", dont la traduction franaise est "rglages de la police", vont nous permettre comme leur nom l'indique de modifier les proprits de la police des fameux plugins. Par dfaut, la police est en Verdana (Arial, sans-serif), de taille 1.1 em et n'est pas en gras. V ous allez donc pouvoir commencer modifier ceci comme bon vous semble. Personnellement, je vais mettre la police en Arial, sans modifier les deux autres proprits.
Le "corner radius"
Le ThemeRoller de jQuery UI utilise videmment des proprits CSS3. La proprit border-radius, si vous ne le savez pas, permet d'arrondir les coins d'un lment donn. Le "corner radius" permet d'indiquer une valeur d'arrondissement. Ainsi, dans notre cas, les coins des blocs conteneurs sont arrondis de 4px, qui est la valeur par dfaut. V oici par exemple le rsultat si je monte 15px :
Le "header" et la "toolbar"
On entre dans la partie intressante. plugins. Ce sont les proprits CSS qui stylisent l'arrire-plan des en-ttes prsents sur certains
Le ThemeRoller met disposition un systme de patterns transparents, qui permet d'ajouter un effet de texture, comme un dgrad, un effet de brillance, un quadrillage, etc. La premire donne entrer est la valeur hexadcimal de la couleur de l'arrireplan. La deuxime est le type de pattern, et la troisime est son opacit. Pour un effet moderne, je vais y mettre un lger dgrad noir, avec une opacit de 30% pour mon pattern :
www.siteduzero.com
15/68
Mais on ne va rien y voir, sur ton en-tte, le texte est illisible !
Oui, et c'est pour a que les couleurs du texte et des icnes sont modifiables. Cela fonctionne de la mme faon que pour la couleur d'arrire-plan. Pour mon exemple, je vais mettre la couleur du texte en blanc :
Le "content"
Mme chose, sauf que nous allons modifier ici le style CSS du contenu, ce qui contiendra le texte principal. J'y ai entr les rglages suivants :
lments cliquables, overlays et shadows lments cliquables

Les lments cliquables, dans jQuery UI, sont principalement les boutons, les onglets et les icnes. Ces dernires ne seront pas abordes ici. On distingue en gnral trois niveaux lorsqu'il s'agit de styliser un lment cliquable : l'apparence dite par dfaut, quand aucune action n'est lance ; l'apparence lorsqu'on passe la souris sur l'lment (appel hover en anglais) ; et l'apparence lorsqu'on clique dessus (appel active en anglais). Il va donc nous falloir dfinir, pour chacun de ces niveaux, un style particulier.
www.siteduzero.com

Style par dfaut : il correspond sur le ThemeRoller la section "Clickable: default state". Style hover : il correspond la section "Clickable: hover state". Style active : il correspond la section "Clickable: active state". La dfinition des proprits se fait de la mme faon que prcdemment : il vous faut spcifier la couleur de background , la texture, son opacit, et la couleur de la bordure et du texte.
16/68
Les "overlays"
Overlay dsigne l'lment qui va recouvrir la page lorsqu'on ouvrira une nouvelle fentre. Cela permet une mise en valeur, et un bon niveau esthtique. C'est en gnral une texture que l'on va rpter sur les axes et , pour former un arrire-plan semitransparent. Exemple :
Ici, toute la partie grise reprsente l'overlay ; on peut d'ailleurs distinguer un pattern. La modification des proprits se fait dans la section "Modal Screen for Overlays", encore une fois de la mme manire, cette fois en dfinissant en plus l'opacit de l'overlay.
Les "shadows"
V ous l'aurez tout de suite compris, on va parler ici des ombres. Les proprits CSS vont lgrement changer, et leur modification se fait dans la section "Drop Shadows" du menu de gauche. Les premires fonctions ne changent pas : couleur du background , pattern et opacit. En dessous se trouve l'opacit de l'ombre intgrale. L o a se complique un peu, c'est pour les proprits de la forme de l'ombre. En effet, il nous est possible de modifier son tendue, sa place, ainsi que la valeur d'arrondi de ses coins (rappelez-vous les corner radius). V oici quoi correspondent les proprits sur le ThemeRoller : "Shadow Thickness" : c'est la taille ou l'tendue de l'ombre. "Top offset" et "Left offset" : ce sont les dcalages de l'ombre par rapport au bloc mis en valeur. "Corners" : ce sont les arrondis de l'ombre. Pour mon exemple, avec une tendue de 2px, des dcalages 10px et des coins arrondis de 8px :
www.siteduzero.com
17/68
Mettre en place notre thme

Une fois notre thme termin, il va nous falloir le tlcharger, sinon a ne servirait pas grand-chose. Il vous suffit pour cela de cliquer sur le bouton Download Theme prsent dans le menu de gauche. V ous retournerez sur la page de tlchargement de la librairie. Le problme, c'est qu'on ne veut que notre thme, puisqu'on a dj le reste des fichiers. Qu' cela ne tienne, cliquez sur "Deselect all components" afin de rduire le poids de l'archive, et tlchargez le tout. Une fois le fichier rceptionn, dcompressez-le, et allez chercher votre thme dans le fichier css/. Copiez le dossier customtheme, et allez le coller dans votre vrai dossier jQuery UI, l'emplacement votre_dossier/developmentbundle/themes/. Il ne vous reste plus qu' renommer votre fichier CSS et l'inclure dans vos pages ! Je mets votre disposition le thme que j'ai concoct pour mon exemple, et que j'utiliserai pour le reste du tutoriel.
Cliquez ici pour le tlcharger

Ce chapitre est prsent termin. Offrir de bons lments graphiques vos visiteurs est une chose importante, et le ThemeRoller de jQuery UI est un outil trs pratique pour cela. V ous verrez que le thme a son importance tout au long de ce tutoriel, il permet une vraie finition de vos plugins ! Je vous invite passer la deuxime partie, o l'on parlera des interactions .
www.siteduzero.com
Partie 2 : Les interactions
18/68

C'est parti ! Nous allons commencer par tudier les interactions , qui sont les actions fondamentales qui nous permettront d'interagir avec notre visiteur. Au programme : systme de Drag and Drop , redimensionnement la vole, slections d'lments et rangement semi-automatique. Pas de quoi s'ennuyer, en somme.
Le Drag & Drop

Bienvenue dans cette deuxime partie ! Nous tudierons ici les interactions , qui seront les actions les plus utiles que vous mettrez disposition sur votre site. Les plugins rentrant dans cette catgorie sont au nombre de cinq seulement, mais sont parfois assez complexes personnaliser. C'est pourquoi je vous recommande de lire plus attentivement les chapitres qui suivront. Technique de plus en plus la mode, le Drag & Drop permet en fait l'utilisateur de prendre un lment, et de le dplacer sa guise quelque part sur la page. C'est une dfinition grossire et approximative, j'en ai conscience, mais nous verrons cela plus en dtail dans ce chapitre. Le niveau monte d'un cran ; je vous conseille donc de relire attentivement le chapitre et de faire des tests par vous-mme si vous n'avez pas tout compris.
Dfinitions
Il serait dommage de commencer vous apprendre vous servir des plugins drag et drop si vous n'en connaissez pas le principe. C'est pourquoi je vais vous expliquer concrtement ce que sont ces btes-l. Il faut savoir que le mot drag en anglais, dans le contexte prsent, signifie quelque chose comme traner, glisser en franais. De la mme manire, drop , toujours en anglais, veut dire quelque chose comme dposer. Ainsi, en ne se rfrant qu' une traduction (certes approximative), on peut dj saisir l'ide : on slectionne un lment, pour le dposer autre part.
Allons plus loin

Le "drag"
En Javascript, le drag se fait en fait grce un systme de coordonnes. Je ne vais pas entrer dans les dtails, mais si vous ne le savez pas, sachez que votre cran, et plus prcisment la fentre de votre navigateur, possde un axe et un axe . Ainsi, grce des mthodes Javascript et des vnements tels que mousedown, mousemove et mouseup, on peut connatre les coordonnes de votre curseur, et ainsi les "transmettre" l'lment dplac. Ce dernier sera alors capable de suivre votre souris jusqu' ce que vous le lchiez. C'est ce qu'on appelle le drag .
Le "drop"
Ensuite, lorsque vous relchez l'lment slectionn, la technique du drop consiste dtruire tous les vnements associs. Cela a pour effet d'annuler la "transmission" de coordonnes, et donc d'immobiliser l'lment. Bien sr, ceci n'est que la version simple ; il est possible de perfectionner le code, en faisant par exemple une zone spciale o doit tre dpos le bloc. S'il n'est pas plac l o on le veut, il retourne sa place initiale. Tout cela semble compliqu raliser, et en effet, ce n'est pas une mince affaire si on utilise du Javascript pur. Mais heureusement, des personnes ont pens tout, et ont cr jQuery UI justement pour nous viter de nous casser la tte pour un systme dj ralis des dizaines et des dizaines de fois.
Le plugin Draggable
Dans la librairie jQuery UI, le systme de Drag & Drop ne forme pas un seul et mme plugin. En effet, il est dcompos en deux parties distinctes, savoir le plugin Draggable et le plugin Droppable. Nous allons les voir l'un aprs l'autre, car il faut comprendre comment fonctionne le dplacement d'lment avant d'attaquer la suite.
La fonctionnalit par dfaut

Avant de se lancer dans des codes sophistiqus, il va nous falloir apprendre utiliser la mthode dite par dfaut. Oui, on ne commence pas par la fin ! Pour cela c'est trs simple. Rappelez-vous dans la partie 1, je vous ai expliqu que les plugins devaient tre appels comme des mthodes. Si vous avez des problmes de mmoire, je vous propose de la rafrachir un peu. Nous avions imagin que j'avais cr un petit plugin dont la fonction tait de dire bonjour. Et ce plugin, il s'appelle sur notre lment de la mme faon que les mthodes :
www.siteduzero.com

Code : JavaScript $('p').direBonjour();
19/68
Lors de lexcution de ce code, mon paragraphe se chargera d'afficher Bonjour. C'est exactement la mme chose pour les plugins de jQuery UI. Le nom de notre plugin courant est le suivant : Draggable. Pour l'appeler, il nous suffira simplement de faire ceci : Code : JavaScript $(function(){ $('#element').draggable(); // appel du plugin });
Essayez ce code ! L'lment qui aura pour identifiant le mot element sera dplaable grce au super plugin de la librairie ! Si c'est pas magique ! J'espre que vous n'aviez pas oubli le fameux $(function());, car c'est quelque chose de trs important !
Amliorons notre effet

Cette interaction est jolie, bien faite et pratique, oui. Mais pour l'instant, a ne ressemble pas quelque chose d'ultra-sophistiqu ! En effet, quel intrt pour le moment de donner la possibilit au visiteur de dplacer un bloc avec un peu de texte l'intrieur ? La rponse cette question est videmment aucun. Les dveloppeurs de jQuery UI ont donc mis notre disposition une srie de paramtres, afin de personnaliser et d'amliorer l'interaction produite. Nous allons voir les principaux, ceux dont vous vous servirez le plus. Il n'y en a aucun d'inutile, comprenez-le bien, mais certains prsentent un plus fort intrt pour nous que d'autres.
Limiter le dplacement
Il y a deux faons de limiter le dplacement : En spcifiant une restriction au niveau de l'axe ( ou ). En spcifiant une zone restrictive. Ce n'est peut-tre pas spcialement clair, mais il faut retenir qu'il n'y a pas qu'une seule faon de restreindre le mouvement d'un bloc. Nous allons nous intresser la premire mthode, qui est aussi la plus simple comprendre, savoir la restriction au niveau des axes et . Pour cela, le paramtre modifier se nomme axis. Il suffit d'appeler cette option, et de lui donner soit la valeur "x", soit la valeur "y" : Code : JavaScript $('.drag1').draggable({ axis : 'x' }); // le bloc ayant pour classe la valeur "drag1" ne pourra tre dplac qu'au niveau horizontal
www.siteduzero.com

$('.drag2').draggable({ axis : 'y' }); // le bloc ayant pour classe la valeur "drag2" ne pourra tre dplac qu'au niveau vertical
20/68
Essayez ce code ! La deuxime faon est peine plus complique comprendre. Le paramtre modifier n'est pas le mme, et se nomme containment. Il prend pour valeur la classe ou l'identifiant de l'lment qui jouera le rle d'une zone, d'o notre bloc dplaable ne pourra pas partir. V oici un schma illustrant l'effet et le fonctionnement de ce paramtre :
Et le code permettant de le mettre en uvre : Code : JavaScript $('#drag').draggable({ containment : '#limitation' });
Essayez ce code ! Grce cela, mon bloc ayant drag pour id ne pourra pas sortir de mon bloc ayant limitation pour id. Si le bloc tenant le rle de la zone est directement le parent du bloc dplaable, il vous est possible de spcifier le motcl parent en tant que valeur du paramtre.
Dfinir un magntisme
Le magntisme, comme son nom l'indique, est en gnral utilis pour rapprocher le bloc dplac d'un autre bloc s'il en est prs. Il y a, encore une fois, deux faons d'utiliser le magntisme : En modifiant le paramtre snap et en lui donnant pour valeur la classe ou l'identifiant du bloc exerant le magntisme. En modifiant le paramtre grid et en lui donnant pour valeur un tableau contenant la longueur en pixels d'une unit sur
www.siteduzero.com

l'axe puis sur l'axe .
21/68
Si a vous semble compliqu comprendre, sachez que c'est tout aussi dur de le dfinir. Nous allons utiliser dans un premier temps le paramtre snap. Celui-ci peut prendre deux types de valeurs : soit une chane de caractres, soit tout simplement un boolen. Il faut savoir qu'il est fix false par dfaut, ce qui veut donc dire qu'il n'est pas magntique. Nous allons simplement modifier cette valeur, pour la passer true. Code : JavaScript $('#drag').draggable({ snap : true });
S'il approche d'un autre lment, une fois trop prs, il sera attir automatiquement. L'lment exerant le magntisme doit tre dfini en tant qu'lment dplaable. Cette mthode ne fonctionne pas avec les autres lments du DOM. Pour pallier ce problme, nous allons devoir spcifier la classe ou l'identifiant de l'lment exerant l'attraction. Ainsi, mme si on ne lui attribue pas le plugin draggable, l'effet fonctionnera. Code : JavaScript $('#drag').draggable({ snap : '.draggable' // chaque lment ayant la classe "draggable" exercera une attraction });
Je vous propose prsent de passe au paramtre grid. Il sert crer une grille fictive, comme son nom l'indique, qui magntisera directement et sur toute la page l'lment dplac. Il nous suffira de passer un tableau au paramtre, contenant le nombre de pixels dfini pour une unit sur l'axe et l'axe . Je pense que c'est un peu difficile comprendre, donc je vous ai concoct un petit schma, encore une fois. Imaginons d'abord que nous avons un bloc div ayant drag pour identifiant. Nous dfinissons ensuite cet lment du DOM en tant qu'lment dplaable, et lui passons une grille en paramtre : Code : JavaScript $('#drag').draggable({ grid : [20 , 20] });
Essayez ce code ! Ma grille aura ainsi 20 pixels d'cart entre chacun de ses "barreaux", sur l'axe horizontal, et sur l'axe vertical.
www.siteduzero.com
22/68
Les flches reprsentent la trajectoire donne au bloc dplac. On voit qu'il suit la grille, et ne peut pas glisser de faon fluide cause de celle-ci. Cette mthode peut tre pratique pour l'utilisateur dans le cas o il doit dplacer plusieurs blocs qui doivent au final tre colls et rangs : cela facilite la prcision, et donc l'exprience utilisateur.
Retour l'envoyeur
Un lment dplac, une fois lch, peut retourner d'o il vient. Pratique dans le cas o vous souhaitez que l'utilisateur de votre site dplace un bloc dans un endroit prcis : si l'lment n'est pas lch dans la zone adquate, il retournera sa place initiale. Pour raliser cette action, nous allons nous pencher sur le paramtre revert. Il prend pour valeur un simple boolen, qui est dfini false par dfaut. En le passant true, cela devrait fonctionner : Code : JavaScript $('#drag').draggable({ revert : true });
Essayez ce code ! Et voil, le bloc reviendra sa place initiale une fois lch. Je vous le redis, jQuery UI, c'est magique !
Nous allons maintenant nous intresser au plugin Droppable. V ous vous tes familiaris avec l'action du dplacement, nous allons donc pouvoir la combiner pour raliser un vrai Drag & Drop .
Le plugin Droppable
Nous allons enfin nous intresser au fameux plugin Droppable. Pourquoi fameux ? Parce que coupl avec le plugin Draggable, il va nous permettre de raliser un systme de Drag & Drop (glisser-dposer). Pour rappel, c'est une fonction de plus en plus rpandue sur le web, qui permet au visiteur de dplacer un bloc HTML, puis de le dposer dans une zone, afin de dclencher une action. Les fonctionnalits de ce systme sont trs nombreuses : upload de fichiers, en les dplaant directement de votre disque dur vers la zone d'envoi ; jeux par navigateur ; agencement personnalis d'un espace pour le visiteur ; et tout un tas d'autres choses permettant d'amliorer l'ergonomie de votre site. Mais avant de raliser toutes ces choses plus ou moins complexes, il va nous falloir apprendre crer un systme simple. Pour cela, il faut se dire que le Drag & Drop se ralise en deux temps : le "glisser", ralisable avec le plugin Draggable, et que nous venons de voir ; et le "dposer", que nous allons apprendre faire ici.
La fonction par dfaut

Encore une fois, je vais commencer par vous montrer le plus simple : comment initialiser la fonction du glisser-dposer. C'est en
www.siteduzero.com
23/68
fait trs facile, le principe rsidant dans le fait qu'il faut dfinir un lment comme tant dplaable, et dfinir un autre lment qui fera office de zone o l'on dposera le premier bloc. Code : JavaScript $('#drag').draggable(); // ce bloc sera dplaable $('#drop').droppable(); // ce bloc servira de zone de dpt
Effectivement, a fonctionne. Mais comment peut-on le savoir ? En effet, lorsqu'on dpose notre lment dans la zone approprie, rien ne se passe. C'est parfaitement normal ! Eh oui, nous n'avons dfini aucune action raliser une fois le dplacement termin. Pour faire cela, il faut passer par un vnement, qui prendra comme valeur une fonction dite de callback , dans laquelle nous inscrirons notre code excuter. Son nom n'est autre que drop : Code : JavaScript $('#drop').droppable({ drop : function(){ alert('Action termine !'); // cette alerte s'excutera une fois le bloc dpos } });
Essayez ce code ! partir de l, il vous est dj possible de faire une foule de petites choses, et nous pourrions effectivement nous arrter l. Seulement, j'aimerais vous montrer deux paramtres trs pratiques avant de continuer ce tutoriel.
Limiter les lments accepts

Actuellement, notre zone de dpt accepte tout lment pouvant tre dplac l'intrieur. Mais qu'en est-il si vous ne souhaitez pas que l'utilisateur puisse y mettre tout ce qui lui chante ? Il va nous falloir pour cela utiliser un paramtre, qui se nomme accept. Il prend pour valeur l'identifiant ou la classe de l'lment accept. Ainsi, imaginons que je possde deux blocs div dplacer, et un troisime faisant office de zone de dpt : Code : HTML <div id="drag"> <p>Ceci est un lment valide</p> </div> <div id="not-drag"> <p>Ceci n'est pas un lment valide</p> </div> <div id="drop"> <p>Dposer ici</p> </div>
Mais comme je ne veux pas que le deuxime bloc soit accept par ma zone de dpt, il me suffira de faire ceci en jQuery : Code : JavaScript
www.siteduzero.com

$('#drag').draggable(); $('#not-drag').draggable(); $('#drop').droppable({ accept : '#drag', // je n'accepte que le bloc ayant "drag" pour id drop : function(){ alert('Action termine !'); } });
24/68
Essayez ce code !
Il vous est possible de spcifier plusieurs lments accepts ; il suffit en effet de les sparer par des virgules.
Retour l'envoyeur, 2 me dition

Je vous ai appris prcdemment renvoyer l'lment dplac sa place. Seulement, c'tait assez limit, tant donn que l'action s'effectuait chaque fois. Je vous avais aussi parl du fait qu'il est possible de renvoyer un bloc sa place s'il n'est pas dpos dans la zone adquate. C'est ce que nous allons apprendre faire tout de suite. Nous allons agir grce deux mots-cls : valid et invalid. Le premier permet l'lment d'tre renvoy sa place s'il est dpos dans la bonne zone de dpt, alors que le deuxime fait le contraire. Ce dernier est donc un peu plus intressant. Je vous donne un code d'exemple, mme si je pense que vous avez compris le principe : Code : JavaScript $('#valid').draggable({ revert : 'valid' // sera renvoy sa place s'il est dpos dans #drop }); $('#invalid').draggable({ revert : 'invalid' // sera renvoy sa place s'il n'est pas dpos dans #drop }); $('#drop').droppable({ drop : function(){ alert('Action termine !'); } });
Essayez ce code ! Nous voil maintenant au bout ! Je tiens prciser que ce chapitre n'est pas exhaustif. En effet, je n'ai pas parl de pas mal de paramtres, qui peuvent pourtant se rvler utiles selon les cas. Certains vnements mriteraient galement que l'on parle d'eux, mais je ne l'ai pas fait, afin de ne pas vous embrouiller plus que ncessaire. En fin de tutoriel, vous pourrez retrouver une slection et une explication des diffrents paramtres approfondir. Nous allons donc pouvoir passer au prochain chapitre, qui traitera le plugin Resizable. C'est une interaction trs prise et aime des utilisateurs, car elle permet un agencement plus pointu des diffrents lments d'une page web.
www.siteduzero.com
25/68
Slection et redimension
Ce chapitre sera consacr l'tude des plugins Resizable et Selectable. Le premier permet de redimensionner la vole un lment du DOM, ce qui s'avre tre trs pratique dans certains cas, comme par exemple la gestion des fentres d'un WebOS. Le deuxime, quant lui, permet de slectionner des lments, et d'en rcuprer les donnes, par exemple. Les internautes sont en gnral trs friands de ce genre de choses simples mais pratiques, donc assurez-vous de bien comprendre ce cours pour amliorer leur exprience lors de leur visite sur votre site !
Mise au point
Le chapitre prcdent, qui je le rappelle traitait du Drag & Drop , tait un peu long et brutal en tant que dbut de tutoriel. C'est pourquoi nous allons ralentir avec ce cours, qui va traiter des systmes plus basiques. Les interfaces utilisateur permettent une meilleure exprience au niveau de la visite d'un site web. Mais ce qui fait leur force, ce sont aussi les actions basiques qu'elles mettent en place, telles que le redimensionnement ou la slection. Nous allons tudier ces deux points principaux ds maintenant, et vous verrez que malgr l'apparence simpliste que ces plugins semblent avoir, ils vous seront d'un grand secours lorsque vous commencerez crer des applications complexes. Les noms de ces interactions sont respectivement Resizable et Selectable. Mais comment fonctionnent-elles, concrtement ?
Une histoire de position

Le redimensionnement en Javascript se fait grce plusieurs fonctions natives, telles que offsetTop, offsetParent, clientY, clientX , etc. Elles permettent de rcuprer les coordonnes de votre curseur de souris, puis, grce un calcul effectu avec les positions de l'lment, d'agir directement sur la largeur ou la hauteur de celui-ci. Encore une fois, cela peut vous paratre complexe. jQuery UI se charge de tout, et ce, en une seule ligne.
La slection
La slection d'lments, elle, s'excute encore une fois en agissant sur les coordonnes et de la souris de l'utilisateur. Les vnements mousedown et mouseup sont galement de mise, ce qui permet de commencer ou de stopper l'action excute. En exploitant les positions des lments slectionns ou non, un calcul se charge de dire lesquels sont pris en compte. J'estime que vous devez comprendre plus ou moins comment a fonctionne en coulisse, pour pouvoir utiliser correctement les plugins mis notre disposition. Nous allons donc pouvoir commencer utiliser Resizable et Selectable et modeler notre DOM notre guise.
Redimensionnez vos lments

Attaquons avec le plugin Resizable ! Jusque-l, nous avons vu comment initialiser une interface utilisateur, c'est--dire de la mme faon qu'en appelant une mthode sur un lment. Le module de redimensionnement ne fait pas exception la rgle, et nous l'appelons donc comme ceci : Code : JavaScript $('#resize').resizable();
Essayez ce code ! Ce qui est magique avec ce plugin, c'est que le redimensionnement s'effectue de trois faons diffrentes : l'horizontale ; la verticale ; ou de faon libre. Ainsi, mme si vous pouvez voir cela comme un dtail, l'utilisateur de votre site web ne sera jamais embt s'il veut seulement allonger son lment en largeur et conserver la hauteur ! Croyez-moi, ce genre de fioriture s'avre tre trs pratique, et le visiteur en sera plus satisfait. En revanche, si vous recherchez un effet un peu plus sophistiqu, il va nous falloir tudier les diffrentes options disponibles.
www.siteduzero.com
26/68
Amliorons notre effet

Prserver le ratio
Une des contraintes si vous mettez le redimensionnement la vole porte de mains de vos visiteurs, c'est le risque que ces derniers transforment votre lment de faon ce que le ratio hauteur/largeur ne soit plus respect. Le ratio hauteur/largeur ? De quoi tu nous parles ?
Ce qu'on appelle le ratio hauteur/largeur d'un lment, c'est le respect des proportions de celui-ci lors d'un redimensionnement. Par exemple, admettons que je possde un bloc div d'une hauteur de 150px et d'une largeur de 150px galement. Je lui applique le plugin Resizable, afin de modeler ces proprits ma guise. Seulement, si j'agrandis seulement la largeur, et pas la hauteur, les proportions ne seront plus respectes ! Pour ce faire, j'aurais du agrandir la largeur et la hauteur de la mme manire. Un paramtre permet de forcer le respect du ratio hauteur/largeur. Il s'agit de aspectRatio, qui prend pour valeur soit un boolen, soit une fraction. En passant cette option true, le ratio sera automatiquement pris en compte dans le redimensionnement : si vous agrandissez la largeur seulement, la hauteur suivra le mouvement. Code : JavaScript $('#resize').resizable({ aspectRatio : true // respect du ratio });
Essayez ce code ! En spcifiant une fraction, vous conserverez le ratio d'une autre manire. En effet, la valeur du numrateur influera sur la largeur de l'lment, tandis que la hauteur sera influence par la valeur du dnominateur. Cette fraction dfinit donc la proportionnalit appliquer sur le bloc redimensionner. Code : JavaScript $('#resize').resizeable({ aspectRatio : 16 / 9 // respect du ratio selon ces proportions });
Grce cette mthode, vous n'aurez plus de soucis avoir concernant un non-respect des proportions appliquer sur un lment.
Extremum des proprits

Un second problme pourrait ensuite se poser : l'utilisateur a la possibilit d'agrandir et de rtrcir un lment du DOM autant qu'il le souhaite. Si votre site web possde des tailles strictes et que vous ne souhaitez pas que vos visiteurs puissent agrandir un lment l'infini, il vous est possible d'indiquer une largeur et une hauteur maximum et/ou minimum. Le nom de ces paramtres est le mme que ceux des proprits CSS qui permettent de donner un extremum la largeur et la hauteur d'un bloc. Ils sont au nombre de quatre : maxWidth, pour donner une valeur maximum la largeur ; minWidth, pour donner une largeur minimum un lment ; maxHeight, idem que pour le maximum de la largeur, mais cette fois pour la hauteur ; et minHeight, idem que pour le minimum de la largeur, mais pour la hauteur. N'oubliez pas les majuscules Width et Height , elles ont leur importance !
www.siteduzero.com

Imaginons que je ne veuille pas que les visiteurs de mon site puissent agrandir un lment au-del de 300px, et qu'ils ne puissent pas le rtrcir au-del de 50px. Mon code sera alors le suivant : Code : JavaScript $('#resize').resizable({ minWidth : 50, maxWidth : 300, minHeight : 50, maxHeight : 300 });
27/68
Essayez ce code !
Limitations d'un bloc parent

V ous rappelez-vous du paramtre containment lorsque nous avons tudi le plugin Draggable ? Il nous permettait de spcifier une limite de dplacement lorsque l'lment faire glisser tait contenu dans un bloc parent. Eh bien, il est possible de donner une frontire similaire pour un lment redimensionn ! Le nom de l'option utiliser est exactement le mme, et prend la mme sorte de valeur (la classe ou l'identifiant du bloc dfinissant les limites). Ainsi, si je possde un lment contenu dans un bloc div ayant #limites pour identifiant, je taperai ce code pour l'empcher d'avoir des dimensions suprieures ce dernier : Code : JavaScript $('#resize').resizable({ containment : '#limites' });
Essayez ce code !
Notez que j'aurais parfaitement pu spcifier le mot-cl parent en guise de valeur.
Utiliser un helper
Dans le contexte de jQuery UI, un helper est un petit lment ayant pour fonction principale d'aider, voire d'assister l'utilisateur. C'est un paramtre prsent dans quasiment tous les plugins d'interactions de jQuery UI, mme s'il est utilis plutt rarement. En revanche, on peut obtenir un effet trs esthtique et pratique en s'en servant dans le plugin Resizable. Il va permettre l'utilisateur de visualiser son action avant de l'excuter. Ce helper fonctionne avec une proprit CSS, proprit qui sera donne en tant que valeur au paramtre. Le CSS va nous permettre de styliser tout cela, car le rendu est avant tout visuel. Je ne suis pas un webdesigner n, mais cette proprit devrait faire l'affaire pour mon exemple : Code : CSS .help{ border : 1px solid #1877D5; background : #84BEFD; opacity : 0.3; }
www.siteduzero.com

Je tape ensuite mon code jQuery : Code : JavaScript $('#resize').resizable({ helper : 'help' // je donne la classe stylisant mon helper });
28/68
Essayez ce code ! L'effet obtenu peut tre vraiment gnial, pour peu que vous ayez du got !
Ajoutons un peu d'animation

Le dernier paramtre qui pourrait vous tre utile, mme s'il tient plus de l'effet strictement visuel qu'utile, est animate. Ne le confondez pas avec la mthode animate() de jQuery, qui permet de raliser des animations avances. L'option que je vous montre permet d'ajouter un petit effet lors du redimensionnement d'un lment. Combin avec un bon helper, on obtient quelque chose de vraiment sympa ! Il suffit de passer le paramtre true pour l'utiliser : Code : JavaScript $('#resize').resizable({ animate : true });
Veillez cependant ne pas en abuser : l'utilisateur pourrait au final tre plus gn qu'autre chose. Les effets visuels ne doivent pas tre utiliss avec abus, car ils sont trs vite encombrants si vous ne savez pas les grer ! Nous en avons prsent termin avec ce plugin. V ous avez constat vous-mme qu'on peut obtenir de trs bons effets en ne partant pas de grand-chose, un simple redimensionnement ! Je propose de ritrer cet "exploit" avec un second plugin, Selectable, qui va nous permettre de travailler avec nos lments du DOM et ce, seulement en les slectionnant.
Slection d'lments
La slection est une action utilise pratiquement partout : sur votre systme d'exploitation, dans les logiciels de retouche graphique, dans certaines applications, et maintenant sur les sites web, grce Javascript et plus particulirement jQuery UI. La librairie met disposition un plugin intitul Selectable, dont la fonction est de permettre l'utilisateur de slectionner des lments et d'exploiter l'action (rcupration de valeurs, ajouts multiples dans un panier, gestionnaire d'images, etc.). Nous allons dans cette sous-partie tudier plus particulirement les vnements mis en place par le module, plutt que les paramtres, qui sont bien moins exploitables. Je vous donnerai un mini TP raliser la fin du mini-tuto, qui sera un avant-got du premier vrai travail pratique que vous devrez effectuer un chapitre plus loin.
Initialisons le plugin
Ce plugin s'initialise d'une faon un peu particulire. En effet, pour pouvoir l'utiliser, il nous faut construire une liste en HTML. Les lments qui la composeront, les balises <li></li>, seront slectionnables. Nous appellerons le module sur la liste ellemme, qui se chargera du reste. Code : HTML <ul id="selection"> <li>1er lment</li> <li>2me lment</li> <li>3me lment</li> </ul>
www.siteduzero.com
29/68
Code : JavaScript $('#selection').selectable(); // initialisation du plugin Selectable sur la liste <ul></ul>
A partir de l, a fonctionne et vous pouvez commencer utiliser cette interface utilisateur ! Ahem, on ne voit absolument rien lorsqu'on slectionne des lments !
Effectivement, j'ai oubli de vous dire qu'il fallait dfinir le style de deux classes CSS prsentes dans le framework mis en place par jQuery UI. Ces deux classes sont les suivantes : .ui-selecting, classe qui est affiche lors de la slection d'lments ; .ui-selected, classe qui s'affiche lorsque vous avec termin de slectionner vos lments. Je vous conseille de faire quelque chose de plutt sobre, par exemple : Code : CSS .ui-selecting{ background:white; } .ui-selected{ background:black; color:#fff; }
Essayez ce code ! Avec a, vous n'avez plus de raison de rler, le plugin fonctionne bel et bien ! Ce qui est gnial, c'est que les principes de base de la slection sont respects : vous pouvez par exemple presser la touche Ctrl et ainsi slectionner plusieurs lments mme s'ils ne sont pas cte cte.
Amusons-nous avec les vnements

Je ne vous en ai pas vraiment parl jusque-l, mais sachez que les interfaces utilisateur de jQuery UI mettent en place leurs propres vnements. Cela permet de lancer une action, via une fonction, lors d'une premire action excute par le visiteur. V ous ne vous rappelez pas de quelque chose ? Nous avons dj utilis un vnement lors du chapitre prcdent ! En effet, nous avions indiqu drop, qui prenait pour valeur une fonction de callback . Je vous en avais expliqu assez vaguement le fonctionnement, mais nous aurons l'occasion dans cette sous-partie d'approfondir les vnements.
la fin d'une slection

Slectionner des lments dans une page web, c'est bien, mais en exploiter les donnes, c'est mieux ! En effet, rappelez-vous d'une chose essentielle : vous utilisez jQuery UI pour amliorer l'exprience utilisateur de vos visiteurs, et pas simplement pour faire joli. La fonction pratique doit primer sur la fonction esthtique, c'est une notion trs importante. Ainsi, si vous voulez utiliser le plugin Selectable, il faut que celui-ci ait une utilit. Nous allons donc apprendre quoi sert l'vnement stop de ce module, et l'utiliser afin de retirer des donnes de nos lments slectionns. Il vous faut l'crire de la mme faon que pour l'vnement drop : Code : JavaScript
www.siteduzero.com

$('#selection').selectable({ stop : function(){ // code excuter } });
30/68
L'vnement stop de ce plugin sert excuter du code lorsque la slection est termine. Ainsi, une fois l'action faite, nous pouvons indiquer un navigateur du visiteur d'afficher le contenu des lments slectionns, par exemple. Un vnement prendra toujours une fonction de callback en guise de valeur. Par exemple, imaginons que j'ai un bloc div qui me servira d'lment de rception pour mes donnes. Mon but est de rcuprer le contenu des lments que je slectionne, une fois mon action termine. Je vous conseille d'essayer de le faire par vous-mme, pour vous entraner. Il vous faudra utiliser la mthode each de jQuery, qui se chargera d'excuter la mme chose pour chaque lment trouv. Secret (cliquez pour afficher) Code : JavaScript $('#selection').selectable({ stop : function(){ $('#resultat').empty(); // je vide mon bloc de rception, au cas o il contiendrait dj des informations (vous pouviez aussi utiliser la mthode text()) $('.ui-selected').each(function(){ $('#resultat').append( $(this).text() + ' ; ' ); // j'ajoute les donnes dans mon bloc grce append() }); } });
Essayez ce code !
Une fois les lments dslectionns

Il se peut que vous deviez lancer une action lors de la dslection d'un ou plusieurs lment(s), par exemple changer des proprits de votre style CSS. Dans ce cas-l, un vnement est appropri, il s'agit de unselected. Il s'utilise encore une fois de la mme manire que drop et stop, et prend en valeur une fonction. Ce code affichera par exemple une alerte lors de la dslection d'lments : Code : JavaScript $('#selection').selectable({ unselected : function(){ alert('Vous venez de dslectionner un lment.'); } });
Essayez ce code ! Je n'ai malheureusement pas grand-chose dire de plus au sujet de ce plugin ma foi assez basique. Son utilisation peut se faire de mille et une manires, pourtant, sa personnalisation n'est pas vraiment avance. Les deux principaux vnements couramment
www.siteduzero.com

utiliss sont dcrits ici, j'estime donc que vous tes prt pour passer l'preuve finale de ce chapitre.
31/68
Mini-TP : ralisation d'un petit panier

Ce premier mini-TP va tre l'occasion pour vous d'exprimenter tout ce que nous venons d'apprendre. Il vise aussi vous prparer pour le vrai TP que vous devrez effectuer la fin de cette premire partie, o nous traitons les interactions. Trve de blabla, venons-en aux faits !
But du jeu
Le but de ce TP est de vous faire raliser un petit systme basique de panier. L'utilisateur a le choix entre cinq articles, par exemple, et doit les faire glisser dans son panier pour pouvoir ensuite les acheter. Bien sr, il va vous falloir utiliser les plugins Draggable et Droppable pour raliser ce module, et veiller enlever l'article du "magasin" s'il est ajout. J'en profite pour rajouter une petite difficult maintenant que vous connaissez le plugin Selectable : si l'acheteur a introduit un article qu'il ne voulait pas dans son panier par mgarde, il doit avoir la possibilit de l'enlever. Pour cela, utilisez la slection, pour qu'il puisse supprimer un ou plusieurs objets en mme temps de son panier. Et enfin, les articles supprims du panier doivent videmment retourner de l o ils viennent, c'est--dire leur position de dpart.
Indications supplmentaires
Je ne vais pas vous lcher ainsi sans vous donner quelques indications supplmentaires. D'abord, pour que l'article s'ajoute correctement dans le panier, il va vous falloir le faire disparatre, rcuprer son contenu et introduire ce dernier dans le panier. V ous faites ainsi d'une pierre deux coups : l'objet disparat du "magasin" et est ajout. Ensuite, rappelez-vous que la slection s'effectue une fois l'action termine. Utilisez les vnements et la mthode each de jQuery pour raliser l'action chaque lment trouv. Enfin, une chose que je ne vous ai pas dite, c'est que le plugin Draggable doit tre de nouveau initialis une fois l'article supprim du panier, car jQuery UI ne reconnat pas le nouvel lment cr. N'hsitez pas utiliser certaines fonctions de jQuery, pour manipuler le texte notamment. De plus, je vous conseille de consulter la documentation si vous bloquez quelque part.
Rsultat
Je vous propose un petit aperu du rsultat pour vous donner une ide de la chose :
Deux articles ont dj t glisss dans le panier
Correction
Alors, comment cela s'est-il pass ? Que vous ayez russi ou non, veillez bien suivre la correction. V otre code ne ressemble srement pas au mien, mais s'il fonctionne, alors ne vous en faites pas, il n'est pas faux. Chacun a sa manire lui de coder, et un systme peut tre ralis de beaucoup de faons diffrentes. La premire chose faire tait de crer la structure HTML. Un code Javascript fonctionne en gnral en adquation avec HTML. Personnellement, j'ai opt pour deux listes <ul></ul>, une pour les articles en magasin, et une autre pour les articles du panier. Code : HTML <div id="panier"> <p>Votre panier contient les articles suivants :</p>
www.siteduzero.com

<ul class="resultat"> </ul> </div> <ul id="articles"> <li class="objet">Ours en peluche</li> <li class="objet">Ordinateur portable</li> <li class="objet">Ecran plasma</li> <li class="objet">Bureau en bois</li> <li class="objet">Guitare lectrique</li> </ul>
32/68
La manipulation est ainsi facilite, surtout pour le plugin Selectable. Il fallait ensuite crire le code jQuery. D'abord, nous devions initialiser les plugins sur nos diffrents lments : il fallait rendre les objets du magasin dplaables, dclarer le panier comme zone de dpt, et spcifier la liste prsente dans ce dernier comme slectionnable. Code : JavaScript $('.objet').draggable(); $('#panier').droppable(); $('.resultat').selectable();
Si vous avez commenc par l, vous tiez sur une trs bonne voie. Le but tait ensuite de sophistiquer nos modules en indiquant quelques paramtres facultatifs, mais tout de mme utiles. Par exemple, il fallait dire la zone de dpt de n'accepter que les lments provenant de notre magasin. Imaginez que vous ayez d'autres lments dplaables sur la page mais qui n'ont rien voir avec votre systme. V ous aurez forcment un conflit ! Code : JavaScript $('.objet').draggable({ revert : 'invalid', // l'lment est renvoy sa place s'il n'est pas dpos dans la bonne zone cursor : 'move' // on modifie le curseur pour faciliter la comprhension du visiteur }); $('#panier').droppable({ accept : '.objet' // la zone n'acceptera que les lments ayant "objet" pour classe }); $('.resultat').selectable();
Le plus dur tait de crer la suite du code, c'est--dire de commencer grer les vnements pour dclencher les bonnes actions. Pour le plugin Droppable, il vous fallait utiliser l'vnement drop que nous avions dj vu. Petite difficult dont je ne vous avais pas parl, la fonction de callback devait prendre deux arguments, dont l'un nous servait dfinir l'lment courant (en train d'tre dpos). La suite tait trs simple : on faisait disparatre l'lment grce fadeOut(), on rcuprait le contenu, et on ajoutait cela la liste du panier. Code : JavaScript $('#panier').droppable({ accept : '.objet', drop : function(event, ui){ // les deux arguments spcifier (l'un dfinit l'event courant, l'autre l'lment courant)
www.siteduzero.com

var current = ui.draggable; // on entre l'lment courant dans une variable var resultat = $('.resultat'); current.fadeOut(); // on fait disparatre notre lment resultat.append('<li class="obj-panier">' + current.html() + '</li>'); // on ajoute dans le panier et on dfinit une classe chaque lment } });
33/68
Si vous tes arriv jusque-l, je tiens vous fliciter. Ce n'tait pas vraiment une mince affaire, je vous l'accorde, et pour ceux qui n'auraient malheureusement pas russi, sachez qu'un chec n'est jamais grave. Le tout est de comprendre vos erreurs et de ne plus les refaire la prochaine fois. La suite n'tait pas bien complique : il suffisait juste d'utiliser la mthode each() pour traite chaque lment du panier. Code : JavaScript $('.resultat').selectable({ stop : function(){ $('.ui-selected', this).each(function(){ // on traite chaque lment ayant t slectionn (this est facultatif, mais permet d'viter des conflits) $('#articles').append('<li class="objet">' + $(this).text() + '</li>'); // on ajoute le contenu de l'article dans le magasin $(this).remove(); // on le supprime ensuite du panier ! $('.objet').draggable({ // et on veille redfinir le plugin revert : 'invalid', cursor : 'move'
}); }); }); }
Essayez le systme de panier ! Et voil ! Notre systme de panier est termin. Certes, il est trs basique, mais sachez que si vous tes arriv le raliser, vous tes en excellente voie pour la suite. Je vous conseille de relire la correction si vous ne l'avez pas comprise, et de revoir les chapitres prcdents si jamais vous n'avez vraiment pas russi ce mini-TP. Maintenant que vous tes cals sur les quatre premiers plugins, nous allons attaquer le cinquime et dernier, qui s'intitule Sortable. Ce module va nous permettre de changer de place nos lments, et sera trs souvent coupl avec des widgets, que nous verrons dans la troisime partie de ce tutoriel. Je vous invite donc passer au chapitre suivant !
www.siteduzero.com
34/68
Organisez votre page facilement

Pfiou, ce n'tait tout de mme pas de tout repos ! Je vous avais promis un chapitre calme pour rcuprer du Drag & Drop , mais j'ai d me laisser emporter. Qu' cela ne tienne, nous allons souffler un peu lors de ce chapitre qui traitera de notre dernire interaction : le plugin Sortable. Nous attaquerons ensuite un TP, qui mettra votre talent et votre savoir l'preuve. Ce mini-tutoriel sera donc destin au rangement d'lments. Le plugin Sortable permet l'utilisateur d'organiser lui-mme la page web, grce un inter-changement. Cela doit vous sembler flou, donc n'attendez plus, foncez !
Principes de fonctionnement
Une fois de plus, je vais vous expliquer brivement en quoi consiste l'interface utilisateur que nous allons tudier. Ce module intitul Sortable permet d'organiser des lments de notre page. Comprenez par l que vous pourrez changer un bloc de place, et le remplacer par un autre. Cela est trs utile lorsque vous proposez par exemple votre visiteur de lister ses choses faire ; il peut les organiser dans l'ordre qu'il veut par la suite, grce Sortable ! Ce plugin fonctionne de la mme faon que Selectable, c'est--dire qu'il vous faudra construire une liste en HTML ; le module influencera directement les lments de celle-ci. Le principe est un peu dlicat comprendre au premier abord, c'est pourquoi je vous propose un petit schma explicatif.
Sortable propose une foule d'options et d'vnements, tous plus intressants les uns que les autres. Nous allons en tudier les plus pratiques et utiles, comme d'habitude.
Jouons avec les paramtres

Si le prcdent plugin tait avare de paramtres, celui que nous allons tudier est d'un tout autre acabit ! Il propose pas moins de vingt-cinq paramtres, dont la plupart pourront vous servir.
Limiter le dplacement
Retour de deux paramtres : axis et containment ! V ous en souvenez-vous ? Ils permettent respectivement de limiter le dplacement selon l'axe, ou selon le conteneur. Ils s'utilisent de la faon que nous connaissons : axis prend pour valeur ou ; containment prend pour valeur un lment du DOM ou un mot-cl tel que parent.
Connecter deux listes

V ous ne connaissez pas encore cette action. Un paramtre permet de connecter deux listes ensemble, afin de les faire interagir entre elles : vous pourrez en effet dplacer un lment dans une autre liste, par exemple. L'option utiliser n'est autre que connectWith, qui prend pour valeur la classe ou l'identifiant de la liste connecte. Imaginons par exemple ces deux listes nonordonnes : Code : HTML <ul class="premiere">
www.siteduzero.com

<li>lment <li>lment <li>lment <li>lment <li>lment </ul> 1</li> 2</li> 3</li> 4</li> 5</li>
35/68
<ul class="seconde"> <li>lment 1</li> <li>lment 2</li> <li>lment 3</li> <li>lment 4</li> <li>lment 5</li> </ul>
Le code jQuery permettant de les connecter entre elles sera le suivant : Code : JavaScript $('.premiere').sortable({ connectWith : '.seconde' }); $('.seconde').sortable({ connectWith : '.premiere' });
Essayez ce code !
N'oubliez pas d'initialiser les deux listes et de leur donner toutes les deux le paramtre adquat !
Modifier le curseur
J'ai conscience que vous pouvez prendre cette fonctionnalit comme tant un dtail tout ce qu'il y a de plus facultatif. Et je vous le concde. Seulement, l'utilisateur est trs attentif ce genre de dtails, qui peuvent l'aider comprendre bien plus facilement le concept de votre systme. Et un visiteur qui sait utiliser vos modules est souvent prfrable l'inverse. L'option permettant de modifier l'apparence du curseur lors de l'action du visiteur est cursor. Il prend le type de curseur en tant que valeur. Les diffrents types sont dtaills sur cette page. Exemple : Code : JavaScript $('#sortable').sortable({ cursor : 'move' // le curseur prend l'apparence d'une icne de dplacement });
Un autre paramtre li au curseur permet de donner son emplacement par rapport l'lment dplac. Il se nomme cursorAt et prend en guise de valeur un objet contenant les valeurs de la position du curseur. Ces valeurs sont dfinies par left, right, top, bottom et sont donner en pixels. Ainsi, pour que mon curseur soit toujours l'extrme gauche de mon lment, je taperai ceci :
www.siteduzero.com

Code : JavaScript $('#sortable').sortable({ cursor : 'move', // le curseur prend l'apparence d'une icne de dplacement cursorAt : { left : 0 } // le curseur se place la position 0 par rapport la gauche de l'lment });
36/68
Essayez ce code !
Dpt dans une zone vide

Le dpt dans une zone vide est un problme rcurrent si, par exemple, un de vos lments doit tre coupl avec un autre. Cela se pose en gnral lorsque vous possdez deux listes ou plus inter-connectes, dont au moins l'une d'elles est vide. Si vous ne voulez pas que le visiteur puisse dposer un lment d'une liste dans une autre qui est vide, il existe une solution, qui s'appelle dropOnEmpty, et qui prend un boolen pour valeur. Ainsi, il vous suffit de spcifier true ou false pour indiquer jQuery que vous voulez ou ne voulez pas autoriser le dpt dans une liste vide : Code : JavaScript $('#sortable').sortable({ connectWith : 'ul', dropOnEmpty : false // on indique que le dpt en zone vide est interdit });
Le placeholder
Dans le jargon du dveloppement web, ou du moins de jQuery et HTML, un placeholder est un lment du DOM qui possde la facult d'indiquer l'utilisateur o dposer un bloc, que faire dans un champ de texte, ... Le but est donc d'aider et d'assister le visiteur. Le plugin que nous tudions permet de donner un placeholder chaque zone o doit tre dpos l'lment. L'option adquate, placeholder, prend pour valeur la classe ou l'identifiant qui le stylisera. En gnral, on utilisera la classe .uistate-highlight, qui est directement prise en charge par notre thme. Code : JavaScript $('#sortable').sortable({ placeholder : '.ui-state-highlight' // stylise le placeholder });
L'inconvnient, c'est que nos lments n'ont pas forcment une taille fixe, ce qui engendre un bug sur la taille du placeholder. Un autre paramtre permet de forcer les dimensions de ce dernier, pour chaque lment. Il s'agit de forcePlaceholderSize, que l'on modifiera pour lui donner true comme valeur : Code : JavaScript $('#sortable').sortable({ placeholder : '.ui-state-highlight', forcePlaceholderSize : true // force le redimensionnement du placeholder });
www.siteduzero.com

Essayez ce code !
37/68
Animer le retour
V ous vous souvenez du paramtre revert ? Eh bien, nous pouvons l'utiliser ici pour la troisime fois ! Jusqu' prsent, le retour tait automatiquement fait par le plugin si l'lment dplac n'tait pas dpos la bonne place. Mais avouez que l'effet n'avait rien de trs esthtique... Du coup, je vous propose d'amliorer la chose en mettant l'option de renvoi true. Code : JavaScript $('#sortable').sortable({ revert : true });
Autres options plus ou moins utiles

Il existe d'autres options qui peuvent se rvler utiles selon les cas, bien que plus rarement. Elles permettent globalement d'amliorer l'exprience utilisateur en changeant l'opacit de l'lment dplac, ou de magntiser le dplacement sur une grille. Il s'agit des paramtres suivants : opacity, qui prend pour valeur l'opacit de l'lment lors de son dplacement (entre 0 et 1) ; grid, qui prend un tableau pour valeur, comme vous le savez dj. Je vous propose cet exemple pour illustrer ces options : Code : JavaScript $('#sortable').sortable({ opacity : 0.8, // rduit l'opacit lors du dplacement grid : [10, 10] // magntise le dplacement sur une grille de 10*10 });
Je pense qu'avec tous ces paramtres, vous tes prts affronter les vnements du plugin Sortable !
Matriser les vnements de ce plugin

Sortable offre une multitude d'vnements manipuler. Grce eux, vous serez en mesure de matriser la chronologie de l'action ralise par l'utilisateur, afin de dclencher d'autres codes et de rendre votre page web extrmement dynamique. En gnral, les vnements sont classs en deux catgories : les vnements qui se dclenchent au dbut de l'action ; et les vnements qui se dclenchent la fin de celle-ci. On peut alors contrler chaque tat de nos lments.
Les trois vnements de base

Trois vnements constituent la base de l'action excute sur les lments du DOM : start, qui se dclenche videmment au dbut de l'action effectue ; sort, qui se dclenche pendant l'action ; stop, que vous avez dj vu, qui se dclenche en fin d'action. Je n'ai pas grand-chose ajouter, si ce n'est de vous rappeler qu'ils fonctionnent encore et toujours de la mme manire, c'est--
www.siteduzero.com

dire avec une fonction de callback pouvant prendre deux arguments.
38/68
L'vnement change
L'vnement change s'excute lors du changement d'un lment. Si ce dernier est remplac, alors vous pouvez lancer une action grce cet event . Attention ne pas le confondre avec update, qui est un autre vnement, mais qui ne fait pas exactement la mme chose. On utilisera le plus souvent change dans la suite de ce tutoriel, car il est un peu plus simple. Code : JavaScript $('#sortable').sortable({ change : function(){ // code excuter } });
Rception d'lment(s)
Un des vnements les plus utiles est sans aucun doute receive. Lorsque vous possdez plusieurs listes d'lments dplacer, il se peut que vous deviez lancer une action lors de la rception de l'un d'eux dans une liste qui lui est diffrente. Dans ce cas-l, vous utiliserez l'vnement receive : Code : JavaScript $('#sortable').sortable({ receive : function(){ alert('lment correctement rceptionn !'); } });
Essayez ce code ! V ous connaissez prsent sur le bout des doigts le plugin Sortable ! J'espre que vous tes parfaitement au point, prsent, car nous avons termin d'tudier les interactions de jQuery UI. Mais ne criez pas victoire trop tt : il vous reste raliser un TP lors du prochain chapitre !
www.siteduzero.com
39/68
TP : une galerie d'images

V ous voil arriv dans votre tout premier vrai travail pratique ! J'espre que vous tes fin prt, car vous allez devoir faire chauffer votre clavier. Grce aux connaissances que vous venez d'engranger, vous tes en mesure de raliser une galerie d'images, simple dans un premier temps. Ne vous en faites pas, car ce premier TP est relativement simple. Je ne voudrais tout de mme pas vous faire peur alors que nous ne sommes mme pas la moiti du tutoriel ! Je vous guiderai un peu au dbut, en vous donnant quelques pistes et quelques explications prcises. Ensuite, ce sera vous de jouer !
Pr-requis et explications
Cette premire sous-partie sera consacre aux explications que je vais vous donner. Je vais essayer de dtailler un maximum, pour que vous compreniez bien ce quoi vous devez arriver. Mme si, dans un premier temps, vous pouvez tre perdu, souvenezvous d'un schma simple : initialiser les plugins ncessaires au systme que vous crez ; les paramtrer et les sophistiquer grce aux options ; et enfin, travailler sur le cur et le fonctionnement concret du systme. Ce n'est peut-tre pas la meilleure des faons de procder, mais cela a l'avantage d'tre clair, et vous ne serez ainsi pas totalement perdu.
Objectifs
Comme le dit si bien le titre de ce chapitre, vous allez devoir raliser une galerie d'images pour un utilisateur. Celle-ci sera relativement simple, et sera dcoupe en trois parties : le bloc galerie, qui contiendra les images de l'utilisateur ; le bloc des images prfres , qui contiendra les images prfres de l'utilisateur ; le bloc des images supprimes , qui contiendra les images supprimes. La structure n'est donc pas bien complique. L o a se corse, c'est que nous allons faire ceci directement grce aux interfaces utilisateur. Tout devra se drouler du ct client, en Javascript, grce jQuery UI. Les images de la galerie seront donc dplaables : vous dclarerez dessus le plugin Draggable. Celles-ci pourront donc tre glisses dans le bloc des images prfres de l'utilisateur. Ce dernier sera donc initialis comme zone de dpt, grce Droppable. Les photos prsentes l'intrieur pourront tre ranges par le visiteur lui-mme, vous devrez donc utiliser Sortable. Une icne sera prsente sous chaque image de la galerie, reprsentant une petite poubelle qui, lorsqu'on clique dessus, envoie l'image dans le bloc des images supprimes. Pas de plugin de jQuery UI ici, mais simplement un vnement jQuery. Seulement, il faut que l'utilisateur puisse supprimer dfinitivement les images qu'il n'aime pas ; pour cela, je veux qu'il puisse en slectionner plusieurs d'un coup, qui se supprimeront automatiquement, lui permettant ainsi de ne pas ritrer l'opration plusieurs fois. Je vous laisse deviner le nom du plugin que vous devrez utiliser. Par ailleurs, je vous ai concoct un petit stock d'images que vous pouvez utiliser, au lieu d'aller en chercher vous-mme sur internet, et pour vous faire gagner du temps. Cliquez ici pour le tlcharger.
Coups de pouce
Bien que je vous ai donn toutes les explications ncessaires la cration du systme demand, je vais vous dvoiler quelques astuces, histoire de vous aider un peu. Nanmoins, si vous souhaitez ne pas suivre ces conseils et commencer directement le TP, vous pouvez sauter cette partie. Aprs tout, certaines personnes aiment le challenge, et on peut tout faire sauf le leur reprocher !
Utilisez les vnements des plugins

V ous aurez absolument besoin des vnements des plugins que vous utiliserez. Veillez dterminer correctement lesquels vous seront utiles, et si vous avez besoin des deux arguments que peut prendre la fonction de callback .
Servez-vous des fonctions jQuery
www.siteduzero.com
40/68
jQuery UI repose sur la librairie jQuery avant tout. J'espre pour vous que vous la connaissez vraiment, ou tout du moins les bases, car vous allez devoir vous en servir, comme par exemple les mthodes de parcours, qui vous seront trs utiles ici. Si vous bloquez quelque part, je vous renvoie sur la documentation franaise. Je vous donne aussi un aperu de ce que vous devriez obtenir :
Et pour les moins srs d'eux, la structure HTML de base : Secret (cliquez pour afficher) Code : HTML <div class="systemeGalerie"> <h3>Galerie d'images</h3> <div class="galerie"> <ul id="images">  <li><img src="images/paysage1.jpg" alt="Paysage 1" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage2.jpg" alt="Paysage 2" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage3.jpg" alt="Paysage 3" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage4.jpg" alt="Paysage 4" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage5.jpg" alt="Paysage 5" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage6.jpg" alt="Paysage 6" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage7.jpg" alt="Paysage 7" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage8.jpg" alt="Paysage 8" /><span class="ui-icon ui-icon-trash"></span></li> </ul> </div> <h3>Images prfres <small>Rangez-les dans l'ordre que vous voulez</small></h3> <div class="preferance"> <p><span style="font-style:italic;">Glissez vos images prfres ici.</span></p> <ul id="liste">  </ul> </div> <h3>Images supprimes <small>Slectionnez-les pour les supprimer dfinitivement</small></h3> <div class="suppression"> <ul id="listeSuppr">  </ul> </div> </div>
www.siteduzero.com
41/68
Enfin, pour tout problme, veillez consulter avant toute chose la documentation de jQuery UI, qui est trs bien ralise. V ous y trouverez tout ce dont vous avez besoin. vous de jouer !
Correction !
Alors, a fonctionne ? J'espre sincrement que vous avez russi raliser le systme que je vous demandais. Ce n'tait pas vraiment compliqu, mais comme c'tait votre premier TP, je peux comprendre que vous soyez un peu dpays. Qu' cela ne tienne, nous allons corriger tout cela ensemble, et point par point. Si votre code est un chec, assurez-vous de bien suivre la correction, vous comprendrez vos erreurs et vous ne les referez plus !
Avant d'attaquer le Javascript

Il vous fallait dans un premier temps dfinir votre structure HTML. Si vous l'avez fait vous-mme, vous constaterez que vous avez une meilleure comprhension de votre systme, et peut-tre que vous auriez moins russi si vous aviez pris ma propre structure. Pour rappel, je vous ai donn ceci : Code : HTML <div class="systemeGalerie"> <h3>Galerie d'images</h3> <div class="galerie"> <ul id="images">  <li><img src="images/paysage1.jpg" alt="Paysage 1" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage2.jpg" alt="Paysage 2" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage3.jpg" alt="Paysage 3" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage4.jpg" alt="Paysage 4" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage5.jpg" alt="Paysage 5" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage6.jpg" alt="Paysage 6" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage7.jpg" alt="Paysage 7" /><span class="ui-icon ui-icon-trash"></span></li> <li><img src="images/paysage8.jpg" alt="Paysage 8" /><span class="ui-icon ui-icon-trash"></span></li> </ul> </div> <h3>Images prfres <small>Rangez-les dans l'ordre que vous voulez</small></h3> <div class="preferance"> <p><span style="font-style:italic;">Glissez vos images prfres ici.</span></p> <ul id="liste">  </ul> </div> <h3>Images supprimes <small>Slectionnez-les pour les supprimer dfinitivement</small></h3> <div class="suppression"> <ul id="listeSuppr">  </ul> </div> </div>
www.siteduzero.com
42/68
Je vous avais dit qu'on allait dcouper le module en trois parties : les images de la galerie, les images prfres, et les images supprimes. Ainsi, je possde trois blocs div, qui contiennent tous une liste non-ordonne, charge de contenir les images. C'tait tout ce qu'il y avait faire ! J'espre que vous n'avez pas oubli d'inclure les librairies sur votre page, sinon, a ne fonctionnera pas !
Code : HTML <span class="ui-icon ui-icon-trash"></span>
Ce petit morceau de code permet d'afficher une icne en forme de corbeille ; jQuery UI, dans son framework CSS, possde plusieurs dizaines d'icnes comme celle-ci qui peuvent tre appeles de cette faon. Bref, tout a, c'tait la partie facile.
Du ct jQuery
Nous allons maintenant nous intresser au cur du systme, c'est--dire le fichier Javascript dans lequel nous taperons tout le code permettant de faire fonctionner le systme de galerie que je vous ai demand. Comme dit prcdemment, une bonne mthode adopter est de commencer par initialiser les plugins, puis tisser notre code tout autour. Mais de quelles interfaces utilisateur allons-nous avoir besoin ? En se posant cette question, il faut faire le parallle avec votre structure HTML et le rendu final que vous souhaitez avoir. Dans notre cas, on vaut d'abord pouvoir dplacer les images. Nous allons donc utiliser Draggable. Ensuite, il nous faut pouvoir les glisser dans une zone de dpt bien dfinie. On embarque donc Droppable. Dans le bloc des images prfres, l'utilisateur doit pouvoir ranger ses photographies comme il le veut. Il nous suffit donc d'utiliser Sortable. Pour finir, on veut pouvoir supprimer dfinitivement les images en usant d'une slection, le dernier plugin qui nous servira sera donc Selectable. Maintenant que nous savons ce qui nous sera utile, on va se charger de les initialiser. Assurez-vous bien de ne pas vous tromper d'lment dans le DOM, car si vous appelez un plugin la mauvaise place, vous risquez d'avoir des rsultats surprenants. Code : JavaScript $('#images img').draggable(); // on rend les images de la galerie dplaables $('.preferance').droppable(); // on initialise une zone de dpt $('#liste').sortable(); // la liste contenant les images prfres est dclare de faon ce qu'on puisse ranger ces dernires $('#listeSuppr').selectable(); // enfin, la liste contenant les images supprimes est dclare de faon ce qu'on puisse slectionner celles-ci
partir de l, vous tiez sur la bonne voie. La chose faire ensuite tait de passer des paramtres nos plugins, pour les amliorer, empcher certaines actions et rendre l'exprience utilisateur nettement meilleure. Cela tient plus du domaine de la personnalisation qu'autre chose, mme si il est important de spcifier certaines options. Code : JavaScript $('#images img').draggable({ revert : 'invalid', // on renvoie les images leur place si elles ne sont pas dposes au bon endroit cursor : 'move', // on dfinit un nouveau curseur pour aider le visiteur comprendre l'action
www.siteduzero.com

stack : '#images img' // option dont je n'ai pas parl, elle permet de mettre au premier plan l'image dplace (cela empche les autres de passer au-dessus) }); $('.preferance').droppable({ accept : '#images img', // trs important, ce paramtre permet de n'accepter que les images de la galerie activeClass : 'hover', // classe appele lorsqu'on commence l'action de transition hoverClass : 'active' // classe appele lorsqu'on rentrer l'image dans la bonne zone }); $('#liste').sortable({ revert : true // les images sorties lors du rangement sont remises automatiquement la bonne place }); $('#listeSuppr').selectable();
43/68
Grce ces paramtres, vos interfaces seront beaucoup plus vivantes et l'utilisateur en sera bien plus heureux. De plus, ils permettent d'viter certains conflits, tels que la dposition d'un mauvais lment dans une zone. Ils ne sont donc absolument pas ngligeables ! Le plus difficile vient ensuite. Il va nous falloir faire appel aux vnements pour lancer les actions qui permettront de faire fonctionner la galerie. Pour cela, vous deviez vous demander lesquels vous seraient vraiment utiles. C'tait relativement simple, car nous les avions dj vus : drop, qui se chargera de lancer du code lors du dpt d'une image ; et stop, que l'on utilisera dans le plugin de slection, qui lancera le code lors de la fin de la slection des images. Code : JavaScript $('#images img').draggable({ revert : 'invalid', // on renvoie les images leur place si elles ne sont pas dposes au bon endroit cursor : 'move', // on dfinit un nouveau curseur pour aider le visiteur comprendre l'action stack : '#images img' // option dont je n'ai pas parl, elle permet de mettre au premier plan l'image dplace (cela empche les autres de passer au-dessus) }); $('.preferance').droppable({ accept : '#images img', // trs important, ce paramtre permet de n'accepter que les images de la galerie activeClass : 'hover', // classe appele lorsqu'on commence l'action de transition hoverClass : 'active' // classe appele lorsqu'on rentrer l'image dans la bonne zone drop : function(event, ui){ // fonction de callback quipe de deux arguments, qui vont nous servir rcuprer l'lment courant } }); $('#liste').sortable({ revert : true // les images sorties lors du rangement sont remises automatiquement la bonne place }); $('#listeSuppr').selectable({ stop : function(){ // cet vnement sert lancer l'action une fois la slection finie
www.siteduzero.com

}); }
44/68
Dans un premier temps, nous allons nous occuper du premier vnement, qui lancera du code lors du dpt d'une image dans le bloc contenant les images prfres de l'utilisateur. Il vous fallait rcuprer l'lment courant, c'est--dire l'lment tant dplac, pour pouvoir le manipuler. Le plus simple tait de le stocker dans une variable. Code : JavaScript $('.preferance').droppable({ accept : '#images img', activeClass: 'hover', hoverClass: 'active', drop : function(event, ui){ var current = ui.draggable; // on rcupre l'lment tant dplac } });
A partir de l, le plus simple tait de rcuprer l'attribut src de l'image, puis de l'afficher au bon endroit aprs. Il vous fallait utiliser la fonction attr() de jQuery. Code : JavaScript $('.preferance').droppable({ accept : '#images img', activeClass: 'hover', hoverClass: 'active', drop : function(event, ui){ var current = ui.draggable; // on rcupre l'lment tant dplac var path = current.attr('src'); // rcupration du chemin de l'image dplace var list = $('#liste'); // on stock l'identifiant de la liste qui contiendra nos images } });
Enfin, il suffisait de faire disparatre l'image courante, puis d'ajouter le chemin de celle-ci dans un nouvel lment, le tout dans la bonne liste. Pour cela, j'ai us de la fonction fadeOut() de jQuery. Attention, celle-ci ne suffit pas dans notre cas : l'lment est bel et bien invisible, mais ne disparat pas. Il faut donc utiliser la fonction remove(), qui se chargera d'liminer ce que l'on veut. Code : JavaScript $('.preferance').droppable({ accept : '#images img', activeClass: 'hover', hoverClass: 'active', drop : function(event, ui){ var current = ui.draggable; // on rcupre l'lment tant dplac var path = current.attr('src'); // rcupration du chemin de l'image dplace var list = $('#liste'); // on stock l'identifiant de la liste qui contiendra nos images current.fadeOut(function(){ // nouvelles fonction de callback, qui s'excutera une fois l'effet termin
www.siteduzero.com

courant current.parent().remove(); // limination de l'lment
45/68
list.append('<li><img src="' + path + '" /></li>'); // et enfin, ajout de l'image dans la liste des images prfres }); } });
Et voil ! Ce premier vnement nous a permis d'ajouter une nouvelle image dans le bloc adquat. Le tout tait d'avancer tape par tape, et ce, sans se prcipiter. Nous allons maintenant nous attaquer au deuxime, qui sera beaucoup plus facile grer, vous verrez ! Cependant, il nous faut auparavant rgler l'action de suppression et d'envoi dans le bloc des images supprimes. Il faut utiliser l'vnement click de jQuery pour y arriver. Le principe tait exactement le mme que pour l'vnement drop : Code : JavaScript $('.ui-icon-trash').click(function(){ // utilisation de l'vnement click sur l'icne var current = $(this); // on rcupre l'lment courant var li = current.parent(); // on va chercher le parent de ce dernier, c'est--dire l'lment de liste contenant l'image var image = li.find('img'); // on rcupre celle-ci grce la fonction find de jQuery var path = image.attr('src'); // et enfin, on stock le chemin menant l'image li.fadeOut(function(){ // mme chose que prcdemment $('#listeSuppr').append('<li><img src="' + path + '" /></li>'); }); });
Comme vous le voyez, les fonctions de parcours de jQuery sont trs utiles et puissantes ; n'hsitez jamais les utiliser, elles vous seront souvent d'un grand secours ! Attaquons prsent la dernire partie de notre systme : la slection des images supprimes. Eh bien, appelons l'vnement stop dans un premier temps : Code : JavaScript $('#listeSuppr').selectable({ stop : function(){ } });
Rien de bien compliqu ici, vous connaissez le principe. Le truc, ensuite, tait d'utiliser la fonction each(), pour traiter chaque lment trouv par le plugin. Ensuite, il suffisait d'utiliser remove() pour supprimer dfinitivement les photos qu'on ne veut pas. Code : JavaScript $('#listeSuppr').selectable({ stop : function(){ $('.ui-selected', this).each(function(){ // tous les lments slectionns sont traits $(this).remove(); // puis supprims }); } });
www.siteduzero.com
46/68
Et voil le travail ! Lorsqu'on suit la correction, cela ne parat pas bien difficile, mais je sais trs bien que c'est autrement plus compliqu une fois seul devant son code. J'espre que vous avez tout compris, et que vous ne referez plus d'erreurs si vous en avez commis lors de ce TP. Je vous laisse le lien menant mon propre systme de galerie, pour que vous puissiez tester directement en ligne : essayer le systme !
Amliorations
Comme c'est la coutume, chaque TP, je vous proposerai des amliorations faire sur vos systmes pour vous entraner. Ici, notre galerie est trs basique : les fonctions sont limites, et tout ne se passe que du ct client. V ous pourriez par exemple faire : un systme de restauration des images supprimes, comme une vraie corbeille ; un systme de redimensionnement des images ; un systme de visualisation ; un systme d'ajout d'images ; un systme de diaporama, dans lequel l'utilisateur choisirait les images qu'il souhaite mettre ; mettre jour le systme avec AJAX, pour que les modifications ne soient pas phmres (pour l'instant, tout se passe du ct client) ; faire un excellent design (contrairement moi ); et beaucoup d'autres choses, seule votre imagination peut vous limiter ! Bref, rappelez-vous que tout module peut tre amlior, et des mises jour rgulires de celui-ci peuvent vraiment faire la diffrence par rapport vos visiteurs ! N'hsitez donc pas vous entraner un peu, car nous allons passer la troisime partie, o nous traiterons les widgets, mais aussi les effets de jQuery UI. Ce TP est prsent termin ! Je pense que vous tes maintenant familiaris avec jQuery UI, donc nous allons enclencher la vitesse suprieure. La partie suivante, qui est la troisime de ce tutoriel, portera sur les widgets et les effets de jQuery UI.
www.siteduzero.com
Partie 3 : Les widgets et les effets
47/68

Aprs les interactions, il va falloir nous lancer dans les widgets de jQuery UI, qui sont des plugins plus orients dans le confort des utilisateurs. De mme, la librairie met disposition des effets complmentaires, introuvables dans jQuery, et qui sont vraiment trs sympathiques.
Un menu en accordon
V ous entrez prsent dans la troisime partie du tutoriel ! Celle-ci traitera les widgets et les effets mis en place par jQuery UI. Les widgets sont des petits plugins trs pratiques, qui sont vraiment l'exemple type des interfaces utilisateur les plus apprcies des internautes. V ous trouvez votre formulaire de contact ignoblement laid ? V ous aimeriez quelque chose de plus souple, de plus beau, de plus dynamique ? V ous voulez la puissance du Flash ralis avec la lgret du Javascript ? Alors vous tes, encore une fois, au bon endroit pour tout cela ! Ce premier chapitre traitera un des widgets les plus simples utiliser et mettre en place : le menu en accordon.
Qu'est-ce qu'un menu en accordon ?

Avant toute chose, si vous ne savez pas exactement ce qu'est un menu dit en accordon , vous n'irez pas bien loin lors de ce chapitre ! Un menu en accordon est en fait un menu un peu spcial : il contient plusieurs titres de sections, appels couramment headers, qui, lorsque l'on clique dessus, droulent leur contenu. Au clic suivant, si on ouvre une seconde section, celle-ci se dvoile, et la premire se rtracte. V oici par exemple un menu en accordon ralis par le site Alsacreations. En regardant leur propre code, on voit qu'avec du jQuery tout simple, on arrive bien vite une bonne quinzaine de lignes, pour obtenir quelque chose d'assez basique ralisable en une seule ligne avec jQuery UI. Maintenant que CSS3 est implment sur presque toutes les versions rcentes des navigateurs connus, il est possible de faire ce genre de menu sans aucun code Javascript, ce qui est beaucoup plus rapide afficher. Le problme avec cette mthode, c'est que les gens qui utilisent d'anciennes versions de navigateur ne pourront pas utiliser votre super menu ! De plus, le menu cr avec CSS3 est extrmement simple, et il n'est pas possible de le personnaliser autant que si on utilise jQuery UI. Cette dernire librairie va donc nous servir crer un menu de ce style-l, mais en version bien plus sophistique. Eh oui, le principe des interfaces utilisateur, c'est d'tre un systme amlior, ergonomique et utile au visiteur d'un site web. Il y a bon nombre de choses faire pour rendre un menu en accordon beaucoup plus clinquant !
Mais comment a fonctionne exactement, un menu en accordon ?

Les plus curieux d'entre vous se demandent srement comment a marche en coulisse. Le principe des menus en accordon, c'est d'interagir avec les vnements Javascript pour obtenir un effet de slide, le plus souvent, lors de l'ouverture d'une section. Le header est cliquable, et lors de l'action de l'utilisateur, l'vnement dclenche l'affichage d'un bloc div contenant les informations souhaites. En gnral, lorsqu'on clique sur un deuxime header, celui qui a t prcdemment ouvert se referme automatiquement, en agissant grce aux classes des blocs composant le menu, toutes identiques.
Paramtres et vnements
Retour aux bonnes vieilles habitudes ! Les widgets, tout comme les interactions, sont des plugins qui sont appels exactement de la mme manire que ces derniers. Et ce qui est vraiment gnial, c'est qu'ils sont tout autant personnalisables, grce aux options et aux vnements propres euxmmes. Cette sous-partie va donc tre consacre l'tude de quelques-uns de ces paramtres, qui nous seront fort utiles pour rendre l'exprience utilisateur plus pousse. V ous connaissez la chanson, maintenant.
Mettre en place le menu en accordon

Avant toute chose, vous allez devoir apprendre initialiser un menu en accordon grce jQuery UI. Le principe est toujours aussi simple, part pour la structure HTML, qui ncessite un peu d'attention pour tre parfaitement comprise. En effet, celle-ci doit suivre une syntaxe particulire : Premirement, vous devez avoir un bloc principal, qui entoure chaque section de votre menu. Ensuite, vous devez dfinir les headers, c'est--dire les titres de sections. Et enfin, il suffit d'crire vos blocs qui contiendront les informations principales du menu.
www.siteduzero.com
48/68
Par dfaut, jQuery UI mets le plugin en place grce des titres h3, qui jouent le rle de headers. Il est possible de modifier cela, grce un paramtre que nous verrons plus bas. prsent, voici un exemple d'initialisation du plugin Accordion, pour que vous compreniez bien o je veux en venir : Code : HTML <div id="accordeon">  <h3><a href="#">Section 1</a></h3> <div> <p>Sous-menu 1</p> </div> <h3><a href="#">Section 2</a></h3> <div> <p>Sous-menu 2</p> </div> <h3><a href="#">Section 3</a></h3> <div> <p>Sous-menu 3</p> </div> </div>
Code : JavaScript $(function(){ $('#accordeon').accordion(); // appel du plugin });
Essayez ce code !
Mais, un menu, en gnral a se fait avec des listes, non ?
J'allais y venir. Il est courant de raliser des menus, verticaux ou horizontaux, grce aux listes HTML. C'est plus clair que des blocs div, et pour le rfrencement, avoir des titres h3 dans un menu n'est pas quelque chose de conseill. C'est pourquoi nous verrons un peu plus bas dans ce chapitre comment raliser ce type de menu avec des listes, et pas avec des titres et des blocs.
tude des principaux paramtres

Ouvrir une section par dfaut
En temps normal, sans paramtre aucun, la premire section du menu est ouverte par dfaut, lors du chargement de la page. Il est possible de changer cela, grce une option qui se nomme active, et qui prend pour valeur l'index de l'lment afficher. L'index d'un lment, en jQuery, est un nombre qui indique sa place dans la page. Par consquent, si je possde trois liens seulement, l'index du dernier, c'est--dire le troisime, sera 2. Pourquoi pas 3 ? Car l'index commence toujours partir de 0. Ainsi, on commence de compter partir de l, et non pas 1. Donc, si je reprends mon prcdent code HTML et que je veux ouvrir la deuxime section au lieu de la premire l'affichage : Code : JavaScript $('#accordeon').accordion({ active : 1 });
www.siteduzero.com
49/68
Essayez ce code !
Pouvoir fermer une section ouverte

Par dfaut, la librairie initialise le plugin avec l'impossibilit de fermer une section ouverte. Ainsi, on s'assure qu'au moins l'une d'elles reste visible. Il est possible d'ter cette interdiction, en passant true le paramtre collapsible. Grce cela, il vous est possible de fermer une section en cliquant sur son en-tte. Code : JavaScript $('#accordeon').accordion({ collapsible : true });
Essayez ce code !
Dfinir l'vnement dclencheur

Si vous ne souhaitez pas interagir avec le menu en accordon en cliquant avec votre souris, vous pouvez changer l'vnement dclencheur. Il suffit de passer en valeur le nom de ce dernier, et lorsque vous ferez cette action, le menu s'animera de la mme faon qu'avec le clic. Je vous donne quelques exemples d'vnement, couramment utiliss avec jQuery UI Accordion : Nom mouseover Effet Action ralise lors du passage de la souris sur l'lment.
mouseleave Action ralise lorsque la souris quitte l'lment. dblclick Action ralise lors du double-clic.
Code : JavaScript $('#accordeon').accordion({ event : 'mouseover' });
Essayez ce code !
Modifier le type de l'en-tte

V oici un paramtre trs important. Souvenez vous de ce que je vous ai dit : les headers par dfaut du plugin sont les titres de type h3. Seulement, si vous ne voulez pas utiliser ceux-ci, vous pouvez modifier cette restriction en donnant l'lment adquat en tant que valeur l'option header. Je vous avais parl tout l'heure d'une mthode permettant d'utiliser des listes, plus pratiques lorsque l'on ralise un menu sur son site web. Grce au paramtre header, nous allons pouvoir faire cela. Il suffit de commencer par crer la structure HTML que nous voulons. Ici, une simple liste fera largement l'affaire. Ainsi, la bloc principal sera notre liste, et les sections ses lments. Code : HTML <ul id="accordeon"> <li class="titre"><a href="#">Section 1</a></li>
www.siteduzero.com

<li>Contenu de la section 1</li> <li class="titre"><a href="#">Section 2</a></li> <li>Contenu de la section 2</li> <li class="titre"><a href="#">Section 3</a></li> <li>Contenu de la section 3</li> </ul>
50/68
Ensuite, on initialise le plugin dessus, en spcifiant un paramtre pour modifier les en-ttes : Code : JavaScript $('#accordeon').accordion({ header : '.titre' });
Essayez ce code ! ce moment-l, on observe un bug d'affichage trs embtant. En effet, nos lments de liste jouant le rle des en-ttes doivent tre dclars comme tant de type block . Il suffit de le faire en CSS, je pense que vous n'avez pas besoin de moi pour cela.
Changer les icnes

V ous remarquerez les icnes qui s'affichent sur la gauche du titre de votre section. Lorsque cette dernire est slectionne, l'icne change et se charge d'indiquer l'utilisateur que la section est ouverte. Il est possible de changer l'apparence de ces icnes grce un paramtre, qui prend en valeur un objet contenant les nouvelles images afficher. Il faut donc utiliser icons, et modifier les valeurs de header et de headerSelected dans l'objet que vous crez. Code : JavaScript var nouvellesIcones = { header : 'ui-icon-plus', headerSelected : 'ui-icon-minus' }; // on dfinit un objet contenant nos nouvelles icnes $('#accordeon').accordion({ icons : nouvellesIcones // on passe cette objet au paramtre icons });
Le framework CSS de jQuery UI met beaucoup d'icnes notre disposition. Je vous propose une liste des plus utilises avec le plugin que nous tudions : Code Code : JavaScript header : 'ui-icon-plus', headerSelected : 'ui-icon-minus' Aperu
Code : JavaScript
www.siteduzero.com

header : 'ui-icon-carat-1-e', headerSelected : 'ui-icon-carat-1-s'
51/68
Code : JavaScript header : 'ui-icon-circle-triangle-e', headerSelected : 'ui-icon-circletriangle-s'
Code : JavaScript header : 'ui-icon-circle-arrow-e', headerSelected : 'ui-icon-circlearrow-s'
Code : JavaScript header : 'ui-icon-circle-plus', headerSelected : 'ui-icon-circleminus'
Pour plus d'exemples, je vous invite aller voir par vous-mme toutes les icnes de la librairie.
Les vnements
Ce widget ne compte pas normment d'vnements. Hormis celui qui est commun toutes les interfaces utilisateur de jQuery UI ( savoir create, qui se lance ds l'initialisation du plugin), ils sont au nombre de deux, et n'ont pas normment de diffrences. V ous l'aurez srement compris, il nous est possible de lancer une action l'ouverture d'une des sections. Les deux vnements utilisables sont donc change et changestart, qui prennent, comme toujours, une fonction de callback en tant que valeur. La seule diffrence qui rside entre eux, c'est que le premier excute le code aprs l'ouverture d'une section, tandis que le deuxime le lance ds le clic sur l'header. Code : JavaScript $('#accordeon').accordion({ changestart : function(){ alert('Section se prparant tre ouverte !'); // alerte s'affichant avant l'ouverture de la section }, change : function(){ alert('Section ouverte !'); // alerte s'affichant une fois la section compltement ouverte } });
Essayez ce code !
www.siteduzero.com
52/68
Les explications concernant le plugin tant termines, je vous invite passer la sous-partie suivante, dans laquelle nous allons voir une mthode qui nous permet de mmoriser quelle section est ouverte.
Mmoriser l'tat des sections

S'il y a bien quelque chose d'embtant, c'est lorsqu'on quitte un site web sans que les sections du menu ouvertes ne soient mmorises, ce qui oblige l'internaute les rouvrir chaque visite (oui, nous sommes tous paresseux) ! Je vous propose ici une mthode qui permet de monter d'un niveau l'exprience utilisateur, en stockant l'index de la section ouverte par le visiteur. Ainsi, chaque visite, ce dernier n'aura pas rouvrir la section qu'il avait prcdemment laisse. Nous aurons besoin pour cela des cookies.
Grer les cookies avec jQuery

jQuery ne propose pas de mthode permettant de grer des cookies chez un visiteur. Heureusement, un gentil dveloppeur a pens ce manque, et cr un plugin open-source exprs. V ous pourrez trouver le script sur Github, plus prcisment cet endroit. Il vous faudra bien sr l'inclure dans votre page web. Les cookies sont grs grce une mthode extrmement simple.
$.cookie en action
Il vous suffit d'utiliser $.cookie() pour crer un nouveau cookie. Il faudra spcifier le nom de ce dernier entre les parenthses, et il sera automatiquement enregistr. Code : JavaScript $.cookie('cookie1'); // cr un cookie du nom de "cookie1"
Pour lui donner une valeur, il faut passer celle-ci en deuxime argument. On utilisera cette mthode pour supprimer le cookie, en donnant une valeur nulle au contenu. Code : JavaScript $.cookie('cookie1', 'contenu'); // cr un cookie du nom de "cookie1" et lui donne la valeur "contenu" $.cookie('cookie1', null); // vide et supprime le cookie
Afin d'amliorer le script, le dveloppeur a donn la possibilit d'indiquer un temps de vie du cookie, ainsi que son chemin d'accs sur le site web. Il faut passer ces donnes dans un objet, au sein mme du cookie, grce aux paramtres expires et path. Code : JavaScript $.cookie('cookie1', 'contenu', { expires : 3, path : '/' }); // cr "cookie1", ayant pour valeur "contenu", expire dans 3 jours et est disponible sur tout le site web
Mmorisation de la section ouverte

Aprs cette brve explication de la gestion des cookies avec jQuery, je vous propose de revenir notre menu en accordon, et de lui permettre de mmoriser la section actuellement ouverte. La mthode se rvle trs facile : il faut crer le cookie qui se chargera de stocker l'index de la section ouverte, et le modifier lors du changement (rappelez-vous de l'vnement change). Nous allons devoir utiliser le slecteur :eq, qui permet de slectionner les lments d'une page grce leur index (place sur la page), ainsi que la mthode index().
www.siteduzero.com

Je vous propose d'essayer de le faire par vous-mme, en vous aidant de la documentation.
53/68
Explications
V ous avez russi ? Le principe tant dj expliqu, je vous propose de passer directement au code. Code : JavaScript var index = $.cookie("accordeon"); // on rcupre le cookie, et on le cr s'il n'existe pas
La premire des choses faire tait videmment de crer le cookie stockant la valeur. La variable permet de le rcuprer dans le mme temps, afin d'ouvrir la section au chargement de la page. Code : JavaScript var index = $.cookie("accordeon"); // on rcupre le cookie, et on le cr s'il n'existe pas var section; // variable qui contiendra l'index de l'lment if(index != null){ section = $('#accordeon').find('h3:eq(' + index + ')'); // on rentre l'index du titre h3 slectionn } else{ section = 0; // si le cookie n'existait pas, on dfinit la section 0 (premire section ouverte) }
Cela vous demandait un peu plus de rflexion. En effet, il fallait prvoir que le cookie n'existerait pas forcment, et qu'il faudrait par consquent dfinir tout de mme une section ouvrir. Pour cela, on vrifie que la variable index n'est pas vide. Si cette condition est vraie, alors on rentre l'lment slectionn dans une nouvelle variable pralablement dfinie, qui se chargera de pointer l'index plus tard dans le plugin. Code : JavaScript var index = $.cookie('accordeon'); // on rcupre le cookie, et on le cr s'il n'existe pas var section; // variable qui contiendra l'index de l'lment if(index != null){ section = $('#accordeon').find('h3:eq(' + index + ')'); // on rentre l'index du titre h3 slectionn } else{ section = 0; // si le cookie n'existait pas, on dfinit la section 0 (premire section ouverte) } $('#accordeon').accordion({ header : 'h3', active : section, // la section active est celle spcifie par l'lment slectionn change : function(event, ui){ // au changement de section, on modifie le cookie var index = $(this).find('h3').index(ui.newHeader[0]); // on rentre le nouvel lment slectionn dans une variable
www.siteduzero.com

$.cookie('accordeon', index, { path : '/' }); // on rentre le nouvel index dans le cookie (le chemin doit tre la racine, sauf exceptions, afin d'viter des bugs de cookie) } });
54/68
Essayez ce code ! Enfin, le reste du code concernait le plugin lui-mme. Il fallait penser utiliser le paramtre active, qui prenait pour valeur l'lment ouvert, rcupr par le cookie. L'vnement de changement prenait en charge la fonction de callback qui excutait une modification du cookie une fois appele. La principale difficult tait d'utiliser newHeader[0]. La documentation en parle, et indique que cet objet dsigne l'en-tte active. Ce premier widget tait fort intressant ! Il vous aura permis de crer un menu style accordon avanc, grce de multiples paramtres que l'on a mis en uvre dans un systme de mmorisation de l'tat des sections. De plus, il vous a prpar la logique des widgets, ce qui vous sera fort utile par la suite, lorsque nous tudierons des choses un peu plus complexes.
www.siteduzero.com
55/68
La barre de progression
La barre de progression est une chose couramment utilise dans les modules impliquant la technologie Flash. Seulement, c'est une mthode qui est lourde, et pas trs adapte de nos jours, o l'accessibilit est une part extrmement importante dans un site web. C'est pourquoi HTML5 prend en charge de nouvelles fonctionnalits, telles que l'audio, la vido, ou mme l'envoi de fichiers, permettant de faciliter grandement l'intgration de ces systmes. jQuery UI met disposition un widget, la Progressbar, qui affiche une barre de progression, utilisable pour diffrentes choses.
Modalits et explications
Ce chapitre, ddi l'tude du plugin Progressbar, va un peu s'carter de notre plan habituel. Il ne concentre pas normment de paramtres et d'vnements, pour ne pas dire presque aucun. Seulement, son utilisation est trs demande par les internautes, qui, en gnral, aiment voir la progression d'une action qu'ils ont ralise, tels qu'un upload de fichiers, un remplissage de formulaire... Du coup, nous allons voir comment s'initialise ce widget, mais surtout comment l'utiliser bon escient. En effet, il est un peu difficile utiliser si on n'est pas trs l'aise avec jQuery et ses fonctions, et ce sera en plus l'occasion pour vous de voir et de savoir faire un vrai upload ralis avec l'API File de HTML5, qui prend en charge une barre de progression permettant de voir le droulement de l'opration !
Mettre en place le plugin

La barre de progression fonctionne grce un bloc div, dans lequel simplantera un deuxime bloc possdant une largeur variable, qui fera donc office de progression. Bien sr, cela fonctionne en interne, grce la librairie, ce qui nous permet de n'avoir qu'un seul bloc dclarer. Code : JavaScript $('#barre').progressbar();
Le plugin concentre deux paramtres, dont un totalement inutile notre niveau. Ainsi, celui que l'on utilisera souvent se nomme value, et permet d'indiquer la valeur de progression, en pour cents (0-100%). Code : JavaScript $('#barre').progressbar({ value : 50 // remplit 50% (la moiti) de la barre });
Les vnements disponibles sont un peu plus intressants. Ils permettent de dclencher une action lors du chargement complet de la barre, c'est--dire 100%, ou d'excuter du code lors du changement de valeur, et se nomment complete, et change.
Animer le plugin
Pour l'initialisation du widget, c'est fait, mais pour l'utilisation concrte et l'animation, c'est pas encore a ! Nous allons voir dans cette sous-partie comment animer la barre, pour pouvoir en faire une utilisation bien plus prcise plus tard. Ici, le principal problme est en fait de faire avancer la progression, et donc d'augmenter l'option value du plugin. Ce n'est pas chose facile quand on n'est pas bien document, et beaucoup se posent la question de comment animer leur barre pour la rendre vraiment fonctionnelle.
Utilisons la fonction setTimeout()

La principale mthode, et la plus simple en passant, est d'utiliser une fonction de jQuery, setTimeout(), qui excute une
www.siteduzero.com
56/68
action aprs un temps donn en millisecondes. Ici, il s'agira donc de rpter cette action jusqu' avoir compltement rempli la barre de progression. C'est une fonction qui prend deux arguments : l'action raliser, et le temps attendre avant de le faire. Code : JavaScript setTimeout(function(){ alert('Ceci est une alerte se dclenchant aprs 5 secondes.'); }, 5000); // la fonction excutera l'alerte aprs 5000 millisecondes, soit 5 secondes
La fonction de rafrachissement
Nous pouvons prsent crer une fonction qui se chargera de rafrachir la barre de progression. Il suffira ensuite de l'excuter dans un setTimeout(), pour lancer de nouveau la fonction, et ainsi de suite jusqu' avoir rempli totalement la barre. Commenons par initialiser le widget. On lui donne la valeur Code : JavaScript $('#barre').progressbar({ value : 0 }); pour viter toute erreur ventuelle.
Jusque-l, rien de bien compliqu. Il faut ensuite se charger de taper la fonction qui permettra de rafrachir la progression. Le principe consiste rcuprer la valeur courante de la barre, et de l'incrmenter de tant qu'elle n'est pas gale 100%, tout en l'excutant toutes les 50 millisecondes. Code : JavaScript function rafraichir(){ var progress = $('#barre').progressbar('option', 'value'); // rcupration de la valeur actuelle if(progress < 100){ $('#barre').progressbar('option', 'value', progress + 1); // on incrmente la valeur de 1 si elle est strictement infrieure 100 setTimeout(rafraichir, 50); // puis on relance la fonction } }
Essayez ce code ! Une fois cela fait, il ne vous reste plus qu' lancer la fonction ! Pou un maximum d'efficacit et de logique, veillez lancer la fonction, ds le dpart, depuis un setTimeout(). Ainsi, vous serez sr que la barre commence se remplir ds le dbut.
Ralisation d'un systme d'upload

A prsent que vous savez animer la barre de progression, il est temps pour nous d'tudier un cas concret : le systme d'upload. Nombreux sont les webmasters vouloir crer une barre pour indiquer l'avancement d'un upload de fichiers sur leur site web. Malheureusement, jusque-l, la partie n'tait pas gagne : HTML5 n'existait pas, et l'envoi de fichier avec AJAX tait difficile, voire irralisable. Il fallait alors se tourner vers Flash, qui consommait et consomme toujours plus de ressources que Javascript. Cette poque tant rvolue, je vais vous apprendre faire tout cela en jQuery !
www.siteduzero.com
57/68
Utiliser l'objet XHR

Pour raliser un tel systme, il va dj nous falloir utiliser l'API File de HTML5. Je ne vais pas vous servir un cours dessus, tant donn qu'il y en a dj un trs bon cet endroit. En couplant ceci avec notre Progressbar, nous serons en mesure de raliser notre module d'upload personnalis !
Uploader un fichier avec HTML5 et Javascript

Avant toute implmentation de notre plugin, nous devons dj raliser le cur du systme, avec XHR et HTML5. Dans un premier temps, il vous faut crire le code HTML, puis rcuprer les fichiers grce un objet XMLHttpRequest(). Code : HTML <input type="file" id="file" />
Code : JavaScript var inputElement = $('#file'); inputElement.change(function(){ var files = inputElement.attr('files'); var file = files[0]; var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php'); var form = new FormData(); form.append('file', inputElement.file); }); xhr.send(form);
L'API File permet de rcuprer directement les fichiers depuis notre champ file. Il suffit ensuite de crer un nouvel objet XMLHttpRequest() et de l'utiliser pour ouvrir notre script PHP et lui envoyer les fichiers uploader.
Quand jQuery UI s'en mle

C'est bien beau, mais nous devons en venir au cur du sujet ! Comment afficher une barre de progression qui indiquerait l'avancement de l'upload de l'utilisateur ? Rponse : en utilisant le widget adquat de jQuery UI. Le principe est de charger la barre de progression l'envoi des fichiers. En utilisant l'vnement onprogress de l'API, nous serons en mesure de calculer la valeur de la barre de progression pendant l'envoi des fichiers, puisque cet vnement fonctionne comme une boucle. Comment a, vous ne savez pas calculer un pourcentage ? C'est pourtant simple ! Un petit rappel pour les nuls en maths : Code : JavaScript var inputElement = $('#file'); inputElement.change(function(){ var files = inputElement.attr('files'); var file = files[0]; var xhr = new XMLHttpRequest(); $('#barre').progressbar({ value: 0 }); // on initialise le plugin
www.siteduzero.com

xhr.open('POST', 'upload.php'); xhr.onprogress = function(e){ var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression $('#barre').progressbar('value', loaded); } xhr.onload = function(){ $('#barre').progressbar('value', 100); } var form = new FormData(); form.append('file', inputElement.file); }); xhr.send(form);
58/68
Essayez ce code ! Et voil le travail ! C'tait une chose trs simple, puisqu'il m'a suffi de rcuprer le nombre d'octets total du fichier, ainsi que le nombre d'octets actuellement uploads grce aux paramtres loaded et total. L'objet Math de Javascript, utilis avec la mthode round(), arrondit le rsultat pass en argument, qui n'est autre que le pourcentage de progression. Ainsi, nous sommes certains d'obtenir un nombre entier, que l'on indiquera en tant que valeur dans notre Progressbar. Dans le cas o l'vnement de progression aurait un problme, on passe la valeur de la barre 100% automatiquement une fois l'upload termin. Ce chapitre tait d'une grand facilit, et plutt court, en raison des utilisations restreintes de la barre de progression. Le peu de paramtres que ce widget possde ne me permet pas d'approfondir cette partie. Nanmoins, sachez que jQuery UI fait l'objet de mises jour trs frquentes ! Peut-tre aurons-nous un jour l'occasion d'avoir un plugin Progressbar plus labor ? En attendant ce fameux jour, je vous invite passer la suite, o nous traiterons des choses un peu plus compliques !
www.siteduzero.com
59/68
L'autocompltion
V ous revoil ! Ce chapitre sera ddi l'tude approfondie du plugin Autocomplete de la librairie jQuery UI. Le systme dit d'autocompltion est un module semi-intelligent qui permet l'utilisateur de voir une liste de propositions s'afficher lors d'une recherche, en fonction de ce qu'il crit. De plus en plus de sites web l'adoptent, car il est extrmement pratique. Ainsi, le clbre moteur de recherche Google affiche une petite liste de requtes couramment excutes lorsque vous tapez quelque chose dans sa barre de recherche. De mme, le Site du Zro utilise cette technologie, et vous l'avez srement dj exprimente !
Principes
L'autocompltion est un widget qui tait dj prsent dans la version 1.6 de jQuery UI, mais qui avait t retir dans la version suivante, la 1.7. Pour la version 1.8, les dveloppeurs de la librairie se sont penchs dessus et l'ont amlior, permettant ainsi de le proposer de nouveau en libre tlchargement. Traditionnellement, ce plugin est utilis dans les champs de recherche, mais vous pouvez tout aussi bien l'implmenter dans une suggestion de pseudonyme ou de prnom, par exemple. Ainsi, Autocomplete est un widget permettant de gnrer une liste de propositions lors de l'inscription de donnes dans un champ de texte par un utilisateur. videmment, ce ne serait pas vraiment utile si les propositions taient toujours les mmes, c'est pourquoi les mots que vous tapez constituent une slection. Dans cette optique, si vous inscrivez un mot commenant par pro , jQuery UI va vous donner une liste de suggestions contenant ces trois caractres, tries par pertinence (selon la place de ces lettres : en dbut de mot, au milieu, ou la fin). Le clbre moteur de recherche Google, comme je l'ai dit en introduction, utilise depuis trs longtemps cette technologie, qui permet aux visiteurs de voir quelles requtes sont le plus effectues, correspondant aux caractres taps.
Les caractres jq sont interprts par Google, qui renvoie quatre suggestions L'accessibilit est, de nouveau, au got du jour : il vous est ainsi possible de naviguer facilement parmi les propositions grce votre clavier, et plus prcisment les touches , , Entre et chap.
Mise en place
Le plugin d'autocompltion doit se greffer sur un champ de type texte. Il s'initialise de la mme faon que les autres plugins, en spcifiant l'lment utiliser. Ainsi, en ayant un petit formulaire simple contenant un <input type="text" />, je devrai lui donner un identifiant pour le dsigner dans mon code jQuery. Code : HTML <form> <input type="text" id="recherche" /> </form>
www.siteduzero.com
60/68
Code : JavaScript $('#recherche').autocomplete();
Pour fonctionner, ce widget doit prend un paramtre obligatoire, c'est--dire que contrairement aux autres plugins dj tudis, celui-ci ncessite d'utiliser une option indiquant la liste des propositions afficher. Ce paramtre se nomme source, et prend en valeur un tableau contenant chaque suggestion. Code : JavaScript var liste = [ "Draggable", "Droppable", "Resizable", "Selectable", "Sortable" ]; $('#recherche').autocomplete({ source : liste });
Essayez ce code !
Options et vnements
Comme chaque plugin, Autocomplete possde son lot de paramtres personnaliser. L'autocompltion est un systme de plus en plus utilis, il est donc normal de chercher l'amliorer du mieux que nous le pouvons, en utilisant les outils mis notre disposition par jQuery UI. Cela va de la longueur de la chane de caractres taper pour afficher les suggestions, la possibilit de dfinir la position du listing par rapport au champ de texte associ !
Paramtres utiles du plugin

Spcification d'une longueur minimum
Il existe une option qui permet d'exiger une longueur minimum concernant la chane de caractre tape par l'utilisateur. En effet, par dfaut, ce paramtre est dfini 1, ce qui signifie donc que la liste de suggestion apparatra sous le champ de texte au bout d'un caractre inscrit. En changeant ce paramtre, vous rduisez les possibilits de propositions, ce qui donne une liste plus prcise globalement. Il suffit de donner un nouveau nombre entier en tant que valeur, qui correspondra au nombre de caractre(s) taper avant d'afficher le listing. Code : JavaScript $('#recherche').autocomplete({ source : [...], // on inscrit la liste de suggestions minLength : 3 // on indique qu'il faut taper au moins 3 caractres pour afficher l'autocompltion });
Retour sur l'option source

J'aimerais revenir sur l'option source, car je ne vous ai pas tout dit dessus. En effet, prcdemment, je vous ai parl d'un tableau, qui contiendrait les diffrentes suggestions que vous voulez. C'est l'utilisation la plus simple qu'il est possible d'en faire, mais d'autres choses peuvent nous intresser. De cette faon, il est possible d'organiser des donnes. Ce que je veux dire par l, c'est que vous pourriez avoir autre chose
www.siteduzero.com
61/68
suggrer qu'un mot sans relle signification, comme une description, ou mme une image. Ce qui est magique avec le widget que nous tudions, c'est qu'il permet de faire a ; il suffit de construire un tableau contenant autant d'objets que vous avez de propositions. Chaque objet aurait en son sein plusieurs paramtres constituant vos donnes organises ! La liste des paramtres pouvant tre dfinis peut tre allonge indfiniment, mais on utilisera, en gnral, la syntaxe suivante : value, qui permet d'indiquer la valeur inscrire dans le champ de texte une fois slectionne ; label, qui dsigne en fait le titre de la suggestion ; desc, qui donne la possibilit de spcifier une description chaque proposition ; icon, qui devra prendre une image pour valeur. Aprs, libre vous d'inventer les vtres ! Il est ensuite possible de rcuprer ces donnes grce une fonction anonyme, en utilisant l'lment ui.item pour rcuprer ce que l'on veut, et bien sr suivi du nom du paramtre que l'on a auparavant dfini. Code : JavaScript var liste = [ { value : 'Draggable', label 'L\'interaction Draggable permet { value : 'Droppable', label 'L\'interaction Droppable permet { value : 'Resizable', label 'L\'interaction Resizable permet ]; $('#recherche').autocomplete({ source : liste, select : function(event, ui){ // lors de la slection d'une proposition $('#description').append( ui.item.desc ); // on ajoute la description de l'objet dans un bloc } });
: 'Draggable', desc : de dplacer un lment.' }, : 'Droppable', desc : de recevoir un lment.' }, : 'Resizable', desc : de redimensionner un lment.' }
Essayez ce code !
Dfinir la position de la liste

Par dfaut, la liste de suggestions se place en dessous du champ de texte qui lui est associ. Il se peut que a ne vous convienne pas, et comme le mot d'ordre de la librairie est toujours flexibilit , vous pouvez dfinir une nouvelle position grce un paramtre. Au nom vocateur, celui-ci se nomme position, et prend pour valeur un objet, contenant les positions suivantes : my, qui dfinit la position de la liste autour du champ de texte ; at, qui dfinit la position de la liste dans le champ de texte ; Les valeurs indiquer ne sont autres que top, bottom, left ou right, et peuvent tre combines, de la mme manire qu'en CSS, avec les positions relative et absolue. Code : JavaScript $('#recherche').autocomplete({ source : [...], position : { my : 'bottom', at : 'top' } // ici, ma liste se placera au-dessus et l'extrieur de mon champ de texte. });
www.siteduzero.com
62/68
Essayez ce code !
Travaillons les vnements

Slection d'une proposition
vnement basique, la slection dans le contexte de l'autocompltion est une part importante dans la gestion des actions de l'utilisateur. Elle se traduit par select. Point retenir, pour accder aux valeurs d'une suggestion, il vous faut user de ui.item, comme nous l'avons vu prcdemment, suivi du paramtre afficher. Code : JavaScript $('#recherche').autocomplete({ source : [...], select : function(event, ui){ alert( ui.item.value ); // lance une alerte indiquant la valeur de la proposition } });
Ouverture et fermeture
Mme si la liste d'autocompltion s'affiche et se ferme automatiquement, vous pouvez agir sur ces actions grce deux vnements, open et close, qui servent respectivement ... je pense que vous avez compris. Je ne vous donnerai pas de code d'exemple ici, car c'est au final toujours la mme mthode : on instancie une fonction anonyme qui se chargera d'excuter du code l'action que nous avons spcifi.
Rcuprer une liste externe

moins que vous ne vouliez crire toutes les listes de suggestions la force du poignet, vous devrez tt ou tard automatiser leur cration. V ous avez plusieurs solutions qui s'offrent vous : soit vous utilisez une source externe votre site web, qui contient dj une liste de ce dont vous avez besoin (liste de villes, de pays, de prnoms, etc), soit vous devez traiter la requte directement grce AJAX. En gnral, les recherches sur les sites web sont stockes en base de donnes. Les plus pertinentes sont gardes, ou sont traites directement dans le script, puis sont affiches dans notre plugin d'autocompltion. Nous allons apprendre utiliser ces systmes, et plus encore, les raliser.
Rcuprer des donnes depuis un service externe votre site web

Certains services, de golocalisation notamment, mettent disposition des dveloppeurs des listes de noms, souvent sous la forme de documents XML ou JSON. Il est alors possible de les utiliser grce une mthode AJAX, qui se chargera de lire le fichier et d'en tirer les donnes voulues. Un service trs utilis et trs connu (la documentation de jQuery UI s'en sert en guise de dmonstration), se nommant GeoNames, va nous servir d'exemple pour que vous puissiez plus tard raliser vos systmes tout seuls comme des grands ! C'est parti !
Fonction anonyme et requte AJAX

La premire chose faire est de se connecter au script JSON de GeoNames, externe votre site web, pour pouvoir en extraire les donnes. Mais qu'est-ce que JSON, au juste ?
JSON est simplement un format de donnes, de plus en plus utilis car trs lger. Sa particularit rside dans le fait qu'il ne contient en gnral qu'une liste de valeurs et de donnes, et est donc un format trs utile pour obtenir de nombreuses
www.siteduzero.com
63/68
informations en peu de temps. V ous l'aurez compris, c'est parfaitement adapt notre situation : nous voulons juste rcuprer un listing de donnes. Le service de GeoNames a mis en place une URL menant leur liste de villes (donc au format JSON), accessible depuis une requte AJAX. Le principe est donc simple : il faut utiliser la fonction $.ajax() de jQuery pour faire fonctionner notre systme. Mais le problme qui se pose maintenant est le suivant : o placer ma requte exactement ? Si je veux en extraire les donnes, il me faut galement les ajouter mon plugin d'autocompltion, sinon, cela a trs peu d'intrt pour l'utilisateur. C'est l qu'intervient une nouvelle donne que je ne vous avais pas encore rvle : le paramtre source du module Autocomplete peut prendre en charge une fonction de callback ! Grce cela, le souci que nous avions ne se pose plus : Code : JavaScript $('#recherche').autocomplete({ source : function(){ // la fonction anonyme permet de maintenir une requte AJAX directement dans le plugin $.ajax(); }
En spcifiant ensuite l'adresse du script JSON externe, plac sur les serveurs de GeoNames, on pourra tablir notre fameuse connexion. Ainsi, dans le paramtre url de la fonction AJAX de jQuery, je donnerai pour valeur l'URL suivante : http://ws.geonames.org/searchJSON. Code : JavaScript $('#recherche').autocomplete({ source : function(){ // la fonction anonyme permet de maintenir une requte AJAX directement dans le plugin $.ajax({ url : 'http://ws.geonames.org/searchJSON', // on appelle le script JSON dataType : 'json', // on spcifie bien que le type de donnes est en JSON success : function(){ // on se prpare renvoyer les donnes rceptionnes grce l'vnement de succs } }); } });
a commence prendre forme ! La difficult, prsent, est de rcuprer les donnes voulues. Pour cela, il va nous falloir effectuer un tri, de sorte ne pas avoir une liste non conforme la recherche effectue. Imaginez que je commence par taper la lettre d et que j'obtienne des noms de villes commenant par z ! Pas trs pratique, n'est-ce pas ? De plus, il me faut rcuprer les donnes dans mon paramtre source, sinon, rien ne sera pris en compte par le plugin ! La solution est alors de donner deux arguments ma premire fonction anonyme : un qui reprsentera la requte tape dans le champ de texte, et un autre qui reprsentera la rponse renvoye par AJAX, et donc ma liste de suggestions. Code : JavaScript $('#recherche').autocomplete({ source : function(requete, reponse){ // les deux arguments reprsentent les donnes ncessaires au plugin $.ajax({ url : 'http://ws.geonames.org/searchJSON', // on appelle le script JSON dataType : 'json', // on spcifie bien que le type de donnes est en JSON success : function(donnee){
www.siteduzero.com

reponse($.map(donnee.geonames, function(objet){ // le retour sera spcifi ici }));
64/68
});
});
Ehhh, c'est quoi $.map() ? Et pourquoi passes-tu un argument la fonction anonyme de l'vnement success ?
Pas de panique, je vais vous expliquer. La fonction $.map(), propre jQuery, est une fonction qui sert manipuler des tableaux, et plus prcisment les modifier. Nous savons dsormais que le script JSON nous renvoie une liste de suggestions sous forme de tableau, et c'est d'ailleurs pour cela qu'on l'utilise. Maintenant, si vous ne le savez pas, sachez que l'argument pass la fonction de callback de l'vnement de succs sert pointer les donnes renvoyes par le code distant. Imaginez que vous ayez une connexion AJAX simple, un fichier PHP qui se charge d'afficher "Bonjour". Eh bien ce sera ce mot qui sera contenu dans la variable donnee dans notre cas ! Pour revenir notre code, donnee dsigne les valeurs renvoyes par le script JSON. La documentation de l'API de GeoNames stipule qu'il faut utiliser le paramtre geonames pour rcuprer le tableau contenant nos propositions. Seulement, cet array est immense, et il faut y effectuer un tri, comme je l'ai dj expliqu. Dans ce sens, on utilise la fonction $.map() pour ne garder que les suggestions correspondantes la requte de l'utilisateur. La fonction anonyme nous servira retourner les valeurs souhaites ! Il ne nous reste donc plus qu' regarder la documentation sur GeoNames pour savoir quels paramtres on doit utiliser pour rcuprer les suggestions que l'on veut : name retourne le nom de la ville ; countryName retourne le pays dans lequel la ville se situe. Dans le cas qui nous occupe, il nous faut le nom du pays galement, car plusieurs villes portent le mme nom, mais ne se situent pas au mme endroit. Pour faire un exemple, il existe plus d'une dizaine de villes s'appelant New York dans le monde ! Code : JavaScript $('#recherche').autocomplete({ source : function(requete, reponse){ // les deux arguments reprsentent les donnes ncessaires au plugin $.ajax({ url : 'http://ws.geonames.org/searchJSON', // on appelle le script JSON dataType : 'json', // on spcifie bien que le type de donnes est en JSON success : function(donnee){ reponse($.map(donnee.geonames, function(objet){ return objet.name + ', ' + objet.countryName; // on retourne cette forme de suggestion })); } }); } });
Seulement, si l'on teste ce code-l, on constate que a ne fonctionne toujours pas. Pourquoi ? Car nous avons oubli de donner un paramtre notre script. Dans un cas comme le ntre, qui est particulier, une option ne pas oublier est une option propre l'API de GeoNames, qui se nomme name_startsWith, et qui prend pour valeur la chane de caractre tape dans le champ de texte par le visiteur. En temps normal, ce paramtre est tout fait facultatif.
www.siteduzero.com

Code : JavaScript $('#recherche').autocomplete({ source : function(requete, reponse){ // les deux arguments reprsentent les donnes ncessaires au plugin $.ajax({ url : 'http://ws.geonames.org/searchJSON', // on appelle le script JSON dataType : 'json', // on spcifie bien que le type de donnes est en JSON data : { name_startsWith : $('#recherche').val() // on donne la chane de caractre tape dans le champ de recherche }, success : function(donnee){ reponse($.map(donnee.geonames, function(objet){ return objet.name + ', ' + objet.countryName; // on retourne cette forme de suggestion })); } }); } });
65/68
Et voil le travail ! Si vous vous demandez pourquoi j'ai plac mon paramtre dans un objet, qui est lui-mme dans le paramtre data de $.ajax(), c'est parce qu'il est impossible d'utiliser une option externe AJAX directement de cette faon-l. Il faut forcment passer par un objet, et le donner au paramtre adquat qui interprtera tout a. Une option galement trs utile, qui permet de limiter le nombre de suggestions, s'appelle maxRows. Elle prend pour valeur un nombre entier, qui reprsente le nombre de propositions maximal qui s'affichera dans la liste. Cela permet de ne pas charger un listing trop long, qui risquerait d'encombrer l'utilisateur. Code : JavaScript $('#recherche').autocomplete({ source : function(requete, reponse){ // les deux arguments reprsentent les donnes ncessaires au plugin $.ajax({ url : 'http://ws.geonames.org/searchJSON', // on appelle le script JSON dataType : 'json', // on spcifie bien que le type de donnes est en JSON data : { name_startsWith : $('#recherche').val(), // on donne la chane de caractre tape dans le champ de recherche maxRows : 15 }, success : function(donnee){ reponse($.map(donnee.geonames, function(objet){ return objet.name + ', ' + objet.countryName; // on retourne cette forme de suggestion })); } }); } });
Essayez ce code !
www.siteduzero.com
66/68
Rcuprer des donnes depuis une liste personnelle

Peut-tre avez-vous une liste de membres prsente dans une base de donnes ? Peut-tre aimeriez-vous proposer vos visiteurs, lors d'une recherche, un listing de suggestions provenant de votre propre site web ? Si tel est le cas, alors sachez que la mthode que nous allons utiliser est proche de celle que nous avons exploite prcdemment. Le principe va tre de rcuprer la liste voulue avec PHP, puis, grce une fonction, de la convertir en JSON ! jQuery n'aura plus qu' l'interprter pour son plugin. Il est prfrable d'avoir au moins quelques bases en PHP et SQL pour suivre cette partie.
Dernire surprise avec l'option source

Je peux voir d'ici votre mine tonne ! La toute dernire chose savoir sur le paramtre source d'Autocomplete, c'est qu'il est possible de lui indiquer un nom de fichier. Il le lira ainsi automatiquement, et en retirera les donnes indiques. La suite, il n'y a qu' la faire en PHP ! Code : JavaScript $('#recherche').autocomplete({ source : 'liste.php' });
Maintenant, il faut savoir que le plugin, lorsqu'il ouvre le fichier liste.php, envoie dans le mme temps une variable superglobale de type GET, qui s'appelle term. Elle contient la chane de caractre tape par l'utilisateur. Le principe va donc tre de rcuprer cette variable, et d'effectuer une requte sur notre base de donnes grce elle ! Code : PHP - liste.php <?php /* veillez bien vous connecter votre base de donnes */ $term = $_GET['term']; $requete = $bdd->prepare('SELECT * FROM membres WHERE pseudo LIKE :term'); // j'effectue ma requte SQL grce au mot-cl LIKE $requete->execute(array('term' => '%'.$term.'%')); ?>
Le tout est ensuite d'obtenir un tableau encoder en JSON. La mthode consiste en crer un, puis de faire une boucle sur les donnes rcupres en base de donnes pour les ajouter au tableau, avec la mthode de l'empilement. Une fonction permet de faire a : array_push(). Code : PHP - liste.php <?php /* veillez bien vous connecter votre base de donnes */ $term = $_GET['term']; $requete = $bdd->prepare('SELECT * FROM membres WHERE pseudo LIKE :term'); // j'effectue ma requte SQL grce au mot-cl LIKE $requete->execute(array('term' => '%'.$term.'%')); $array = array(); // on cr le tableau
www.siteduzero.com

while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les donnes { array_push($array, $donnee['pseudo']); // et on ajoute celles-ci notre tableau } echo json_encode($array); // il n'y a plus qu' convertir en JSON ?>
67/68
Et c'est ainsi que vous avez votre beau systme d'autocompltion ! Avec un peu de pratique et de patience, il est possible de raliser de trs belles interfaces, afin de rendre l'exprience utilisateur inoubliable pour vos visiteurs. Je n'ai pas grand-chose dire de plus sur ce plugin, si ce n'est que vous ne pouvez que l'amliorer. Un peu de jQuery, de JSON et de PHP, et on comprend de suite comment Google lui-mme s'y prend pour nous bluffer avec son systme d'autocompltion ! C'est fou ce que jQuery UI peut tre pratique et puissant, on s'en tonne chaque utilisation. J'espre que vous avez bien assimil le chapitre, car un nouveau TP risque de bientt tomber, je vous conseille de bien vous prparer. Le prochain chapitre traitera d'une des fierts de la librairie, j'ai nomm le Datepicker. C'est un plugin trs puissant, qui vous vaudra de magnifiques interactivits. Je n'en dis pas plus dessus, car je pense que je vous ai mis l'eau la bouche ! Ce cours n'est pas encore termin ! Il reste plusieurs chapitres rdiger. De mme, sachez que jQuery UI fait l'objet de mises jour trs frquentes, donc n'hsitez pas venir voir s'il y a du nouveau ici, vous pourriez avoir des surprises !
www.siteduzero.com

Decouvrez La Puissance de Jquery Ui PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Decouvrez La Puissance de Jquery Ui PDF

Transféré par

Droits d'auteur :

Formats disponibles

Dcouvrez la puissance de jQuery UI

Licence Creative Commons 6 2.0 Dernire mise jour le 19/04/2012

Prparons-nous encore un peu ......................................................................................................................................... 9

Partie 2 : Les interactions ................................................................................................................. 17

Slection et redimension ................................................................................................................................................. 25

Organisez votre page facilement .................................................................................................................................... 33

TP : une galerie d'images ................................................................................................................................................ 38

Partie 3 : Les widgets et les effets .................................................................................................... 46

La barre de progression .................................................................................................................................................. 54

Dcouvrez la puissance de jQuery UI

Mise jour : 19/04/2012 Difficult : Intermdiaire

Dure d'tude : 20 jours

Dcouvrez la puissance de jQuery UI

Partie 1 : Pr-requis et installations

Internet Explorer 6 et plus Oui Firefox 2 et plus Oui

Partie 1 : Pr-requis et installations

Partie 1 : Pr-requis et installations

Architecture des fichiers

Mise en place des fichiers

Partie 1 : Pr-requis et installations

Partie 1 : Pr-requis et installations

Partie 1 : Pr-requis et installations

Prparons-nous encore un peu

Petit rappel des fonctions jQuery

Partie 1 : Pr-requis et installations

Rien de plus simple !

Cette alerte me renverra : Citation

Partie 1 : Pr-requis et installations

C'est le mode de fonctionnement des plugins de jQuery UI.

Les paramtres, ou options

Partie 1 : Pr-requis et installations

Firebug, une extension Firefox trs utile

Partie 1 : Pr-requis et installations

Les "font settings"

Partie 1 : Pr-requis et installations

Mais on ne va rien y voir, sur ton en-tte, le texte est illisible !

lments cliquables, overlays et shadows lments cliquables

Partie 1 : Pr-requis et installations

Partie 1 : Pr-requis et installations

Mettre en place notre thme

Cliquez ici pour le tlcharger

Partie 2 : Les interactions

Partie 2 : Les interactions

Le Drag & Drop

Allons plus loin

La fonctionnalit par dfaut

Partie 2 : Les interactions

Amliorons notre effet

Partie 2 : Les interactions

Partie 2 : Les interactions

Partie 2 : Les interactions

La fonction par dfaut

Partie 2 : Les interactions

Limiter les lments accepts

Partie 2 : Les interactions

Retour l'envoyeur, 2 me dition

Partie 2 : Les interactions

Une histoire de position

Redimensionnez vos lments

Partie 2 : Les interactions

Amliorons notre effet

Extremum des proprits

Partie 2 : Les interactions