jQuery UI

On ne peut pas tout faire avec la librairie de base jQuery.
Par exemple ne cherchez pas à programmer un "drag and drop" (glisser et déposer) avec le framework de base.
Mais heureusement il y a des extensions (vous pouvez dire aussi : "plugins" ou encore "librairies secondaires" ou encore des "greffons").
L'extension la plus célèbre est jQuery UI (UI : comme interface utilisateur).
Il existe aussi jQuery Mobile pour développer rapidement la version "petits écrans" d'un site.

On dit que jQuery UI c'est un pack de "widgets" (composants graphiques).
Ce sont les trois derniers outils qui sont de loin les plus utilisés. Quant aux autres ils deviennent moins utiles avec la montée en puissance du CSS ...

Récupérer cette extension

Après extraction vous obtenez un dossier comprenant différents fichiers.

Comme dans la librairie de base il y a pour chaque type de fichiers (feuille de style, fichier JS) deux versions : la version avec commentaire et la version de production minimaliste (beaucoup plus légère).

Attention jQuery UI c'est non seulement un framework JavaScript mais aussi CSS. Si vous incluez dans vos pages uniquement le fichier d'extension .js de la librairie jQuery UI le résultat sera ... décevant.

Créer différents onglets dans une page

Plutôt que de créer trois pages ou une page unique très longue on a décidé de répartir le texte de la page entre trois onglets.

En HTML il faut créer une boîte (balise section) contenant trois boîtes (balises article).
Il faut aussi créer des liens vers chaque sous boîte.

Pour que l'aspect de la page soit modifiée radicalement (création d'onglets : un par sous-boîte) il suffit d'appliquer à la boîte principale la méthode tabs()).

Le code de l'exemple

... <script src ="jquery.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <script src ="jquery_ui.js"></script> </head> <body> <section> <ul> <li><a href ="#onglet1" >onglet 1</a> <li><a href ="#onglet2" >onglet 2</a> <li><a href ="#onglet3" >onglet 3</a> </ul> <article id ="onglet1"> <h2>Premier onglet</h2> <p>Proinde die funestis interrogationibus praestituto imaginarius iudex ... </article> <article id ="onglet2"> <h2>Deuxième onglet</h2> <p>Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos ... </article> <article id ="onglet3"> <h2>Troisième onglet</h2> <p>Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato ... </article> </section> <script> $("section").tabs() ; </script> ...

J'ai renommé les fichiers correspondant à la librairie jQuery UI. Ils se nomment tout simplement : jquery_ui.js et jquery_ui.css

La librairie jQuery UI ne peut fonctionner seule ; comme c'est un "greffon" de jQuery la librairie principale doit être chargée également !

Plutôt que d'inclure les fichiers JS et CSS installés sur votre PC on pourrait faire un lien vers le serveur jQuery ou GOOGLE qui mettent à disposition les bibliothèques (voir exemple suivant).

Concernant le code HTML :

Quant au script il est d'une simplicité redoutable !
Il suffit d'appliquer la méthode tabs() au conteneur principal.
Testez le widget onglets

Le véritable code de cette page

En fait jQuery UI ajoute des classes à certaines balises ; classes qui sont définies dans la feuille de style.
Ainsi d'après Firebug le code de la page est (extraits) :

<body> <section class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="onglet1" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"> <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="onglet2" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true"> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="onglet3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"> </ul> <article id="onglet1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;"> <article id="onglet2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-2" role="tabpanel" style="display: block;" aria-hidden="false"> <article id="onglet3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-3" role="tabpanel" style="display: none;" aria-hidden="true"> </section> ...

jQuery UI a ajouté aux éléments HTML différentes classes décrites dans la feuille de style externe.
C'est ainsi que les onglets et les boîtes sont mises en formes.

Utiliser le widget "accordéon"

Pour gérer une page volumineuse on peut aussi utiliser le widget "accordéon".
On dit qu'une page est "en accordéon" lorsque que le contenu de chaque partie est dépliable ou repliable.
Par défaut le visiteur ne voit que les titres des parties (sauf la première partie : titre et contenu). Si il clique sur le titre de la deuxième partie celle-ci est alors dépliée (affichage du contenu) et la première partie est repliée (contenu masqué). Et ainsi de suite ...

Le code de l'exemple (extrait)

... <!-- inclusion feuille de style CSS de jquery UI --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> <!-- inclusion des scripts de jquery et jquery UI --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> </head> <body> <section> <h2><a>Premier chapitre</a></h2> <p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit ... <h2><a>Deuxième chapitre</a></h2> <p>Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam ... <h2><a>Troisième chapitre</a></h2> <p>Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more ... </section> <script> $("section").accordion() ; </script> ...

Dans la partie HEAD il faut toujours inclure la feuille de style du framework et deux fichiers JS.
Mais ici, afin d'obtenir les dernières versions stables, je fais un lien vers le serveur GOOGLE qui met à disposition la librairie jQuery, jQuery UI (et jQuery Mobile).

Dans la partie BODY on retrouve exactement le même texte que dans l'exemple précédent.
Chaque partie du texte doit être précédée d'un titre qui contient un lien vide.
Cette instruction HTML est indispensable. Elle indique à jQuery UI les endroits où il doit se replier ou se déplier ...

Le script est encore d'une simplicité déconcertante.
Il suffit d'appliquer la méthode accordion() au conteneur principal (ici la balise section).
Testez l'exemple sur le widget accordéon

Le code véritable de la page (extraits)

Comme la méthode tabs() la méthode accordion() modifie le code HTML saisi.
Le code de la page d'après Firebug :

... <body> <section class="ui-accordion ui-widget ui-helper-reset" role="tablist"> <h2 id="ui-id-1" class="ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"> <p id="ui-id-2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 103.4px;" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">Proinde die ... <h2 id="ui-id-3" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"> <p id="ui-id-4" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none; height: 103.4px;" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">Coactique aliquotiens nostri pedites ... ...

Comme avec le widget "onglets" le widget "accordéon" ajoute aux éléments HTML des classes décrites dans la feuille de style externe.

Effet "accordéon" avec CSS

Il n'est plus obligatoire d'utiliser jQuery UI pour produire l'effet "accordéon". On peut désormais utiliser le CSS.
Chaque grande boîte a par défaut une hauteur de quelques pixels et si survol la propriété height passe à auto.
On peut même rajouter désormais une transition de quelques secondes.

Redimensionner les boîtes

Dans l'exemple ci-dessous chaque image peut être redimensionnée.

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <style> img{height : 20% ;} </style> </head> <body> <p class ="remarque">Vous pouvez redimensionner chacune des images grâces aux poignées qui apparaissent dès que vous survolez les bords d'une image.</p> <img src ="../images/bikini.jpg" /> <img src ="../images/seins_nus.jpg" /> ... <script> $("img").resizable() ; </script> ...

Dans la partie HEAD toujours inclusion de trois fichiers.

CSS : une règle de style pour affecter une dimension aux images.

Le script : application à la collection d'images de la méthode resizable().
Testez le widget "redimensionner"

Le véritable code de la page

Les images apparaissent les unes sous les autres. Car là encore jQuery UI a rajouté des règles de style des classes aux éléments HTML !

Extraits du code d'après Firebug :

... <div class="ui-wrapper" style="overflow: hidden; position: relative; width: 115px; height: 150px; top: 0px; left: 0px; margin: 20px 0px 20px 0.25px;"> <img class="ui-resizable" src="../images/bikini.jpg" style="resize: none; position: static; display: block; height: 150px; width: 115px;"> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> </div> ...

Non seulement une règle de style est rajoutée aux images mais en plus la balise img se retrouve à l'intérieur d'une boîte DIV ...

Permuter des éléments de la page

Nous allons maintenant évoquer la méthode sortable()

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > </head> <body> <p class ="remarque">Remettez les items dans le bon ordre dans les listes ci-dessous ! <ul> <li>item 5 <li>item 2 <li>item 3 <li>item 4 <li>item 1 </ul> <ol> <li>item 5 <li>item 2 <li>item 3 <li>item 4 <li>item 1 </ol> <script> $("ul,ol").sortable() ; </script> ...

Attention pour que les éléments soient permutable au sein d'une élément parent il faut appliquer la méthode sortable() au parent (ici UL ou Ol) !

Dans la partie HEAD je charge le fichier jquery_touch_punch.js.
Sans ce "greffon" certains outils jQuery tels la méthode sortable() ne fonctionnent pas sur les terminaux à écran tactile (smartphone et tablette).
Cette extension ne pèse que 2 KO !

Pour récupérer cette extension vous pouvez aller sur le site :http://touchpunch.furf.com
Testez la permutation !

Glisser-déposer avec Jquery UI

Je vais maintenant utiliser le widget le plus célèbre de jQuery UI : le "drag and drop".

Le code de l'exemple (extraits)

... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> <style> img{width : 20% ; display : inline-block ; margin : 1% ; } div {height :200px ; width : 900% ; background : pink ; } </style> </head> <body> <img src ="../images/bikini.jpg" /> <img src ="../images/seins_nus.jpg" /> <img src ="../images/jolie_fille.jpg" /> <img src ="../images/trikini.jpg" /> <div>Déposez ici vos photos préférées</div> <script> $("img").draggable(); $("div").droppable(); </script> ...

Partie HEAD : Comme dans l'exemple précédent il faut charger deux fichiers JS (celui de la librairie jQuery et celui de jQuery UI). Donc il faut deux scripts.

Par contre dans le cadre d'un "glisser-déposer" il n'est pas nécessaire de charger la feuille de style de jQueryUI.

CSS : Les images sont des éléments inline-block (boîtes disposées côte à côte).

HTML : insertion de quatre images et création d'une grande boîte avec un fond rose.

La première méthode rend "glissable" les éléments référencés (donc ici les images).
La deuxième méthode rend "déposable" les éléments référencés (donc ici une seule boîte: le DIV unique).
Donc on pourra faire glisser les images pour les déposer dans la boîte DIV (qui a un fond rose ...) !
Messieurs régalez vous ...

Exercice

Vous devez programmer un test de connaissances en biologie aquatique. Vous devez en effet classer quatre photos dans deux cadres ; deux photos représentent des algues et deux autres des plantes aquatiques. Le rendu que vous devez obtenir

Les images et les boîtes DIV (fond rose) sont "inline-block".
Dans le cadre du "responsive web design" les largeurs des images, des marges et des DIV doivent être exprimés en % !

Le code jQuery ne pose aucune difficulté.

Paramètrer la méthode draggable

Ne pensez pas que le "drag and drop" ne peut s'appliquer qu'à des images. On peut glisser et déposer n'importe quel élément de la page.
Dans l'exemple et l'exercice précédents vous avez vu que l'on peut déplacer les images n'importe où dans l'écran. En effet nous n'avons pas paramétrer la méthode draggable().

Exemple

... <style> div {margin : 1% ; display : inline-block ;border : 1px solid red ; width :45% ; min-height : 400px ; vertical-align : top ; } ul li {width : 80% ; height : 40px ; margin-top : 5px; margin-left :1% ; background : gray; line-height : 40px ; text-align : center; list-style-type : none ;} </style> </head> <body> <article style ="width :850px ; height :auto ; margin :auto; background : pink;"> <h2>Composez l'équipe</h2> <div id ="joueurs"> <h3>Joueurs disponibles</h3> <ul> <li>Joueur A <li>Joueur B <li>Joueur C <li>Joueur D <li>Joueur E <li>Joueur F </ul> </div> <div id ="equipe"> <h3>Equipe</h3> </div> </article> <script> $("ul li").draggable({cursor: "move", containment : "article",axis : "x"}); $("#equipe").droppable();
Testez ce code !

Le "glisser-déposer" porte non pas sur des images mais sur des items de liste à puces.
Pour que ces items ressemblent à des boutons j'ai fait un gros effort en matière de CSS. Vous pouvez remarquez que la légende de chaque item est bien centrée horizontalement et verticalement. Il faut aussi se débarasser de la puce.

Si vous ne comprenez mal la feuille de style interne je vous conseille de revoir le tuto "Pour les débutants".

HTML :
La boîte article comprend deux DIV ; la deuxième boîte DIV est identifié equipe.

Le script :

Il y a d'autres paramétrages possibles de la méthode draggable mais qui sont moins utiles ...

La saisie de dates

Les développeurs de site ont pris l'habitude d'utiliser jQuery UI et plus précisémment la fonction datepicker() pour créer dans les formulaires des champs date à partir de input type ="texte".

Attention il faut aussi mettre en forme le calendrier que l'on associe via la fonction datepicker() à un champ texte. Il faut donc non seulement charger le fichier JS de la bibliothèque jQuery UI mais aussi la feuille de style.

Exemple

... <script src ="jquery.js"></script> <link href ="jquery_ui.css" rel = "stylesheet" > <script src ="jquery_ui.js"></script> <style> form {width : 98%; border : 1px solid black;} input, button, label, textarea, select,span{display : inline-block ; margin : 1% ; width : 45% ; vertical-align : top; } </style>: </head> <body> <form> <input type ="hidden" value ="formulaire inscription" /> <label>Saisir votre pseudo :</label><input type="text" /> <label>Saisir date début</label><input type="text" /> <label>Saisir date fin</label><input type="text" /> <label></label><button type ="submit">Validez </buttton> </form> <script> $("input:text:eq(1)").datepicker(); $("input:text:eq(2)").datepicker(); ...

HEAD : il faut charger deux fichiers JS (libraire jQuery de base + jQuery UI) et une feuille de style externe pour formater le calendrier.

CSS : Les éléments de formulaire sont de type inline-block afin que la champ (input) se positionne à droite de la légende (label).

HTML : trois champs texte donc deux légendés "saisir une date" ...

Le script : on associe à deux champs texte la méthode datepicker() décrite dans la bibliothèque jQuery UI
Testez ce code

Il y a un gros bémol. Les dates saisies via le calendrier proposé par jQuery UI sont au format anglo saxon (mm-dd-yy).

Rassurez vous c'est pas dramatique. Il suffit de modifier un peu le script

Solution

$("input:text:eq(1)").datepicker({ dateFormat: 'dd-mm-yy'}); $("input:text:eq(2)").datepicker({ dateFormat: 'dd-mm-yy'});

Il a suffi d'argumenter la méthode datepicker() en précisant le format francophone.
Testez le code débuggé !

Il serait préférable que le calendrier soit lui aussi francisé.

Calendrier en français

Pour que franciser le calendrier il suffit de rajouter quelques lignes de code. Code facile à trouver sur la "toile". Il suffit de poser la question "franciser le calendrier de jquery ?".

Donc le script devient (pas de changement pour le CSS et HTML) :

$.datepicker.setDefaults( { closeText: 'Fermer', prevText: 'Précédent', nextText: 'Suivant', currentText: 'Aujourd\'hui', monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'], dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'], dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'], weekHeader: 'Sem.', dateFormat: 'dd-mm-yy' } ); $("input:text:eq(1)").datepicker(); $("input:text:eq(2)").datepicker();

Le format de saisie est proposé dans le tableau de paramétrage. Donc inutile de le préciser au niveau de la méthode datepicker().
Testez la version avec calendrier francisé !

Un widget obsolète ?

Remarque : Avec HTML 5 le widget calendrier de jQuery UI n'est plus à priori utile puisque il existe désormais les champs de type date.

Le code HTML :

... <body> <form> <input type ="hidden" value ="formulaire inscription" /> <label>Saisir votre pseudo :</label><input type="text" /> <label>Saisir date début</label><input type="date" /> <label>Saisir date fin</label><input type="date" /> <label></label><button type ="submit">Validez </buttton> </form> ...
Testez le code en HTML5

Testez cette page avec Firefox ou IE !

Le problème avec les champs de type date de HTML5 c'est qu'en ce début de l'année 2017 ce type n'est toujours pas implémenté par Edge ni par Firefox ...
De plus l'aspect du calendrier change selon les navigateurs qui ont intégré ce nouveau type de champ.
Donc le widget datepicker reste encore d'actualité !

Autocomplétion

Définition : vous commencez à saisir dans un champ texte et dès que vous avez tapé quelques lettres des suggestions apparaissent.

Il faut utiliser la méthode autocomplete() de jQueryUI mais aussi un tableau contenant une liste de mots.

Imaginons une recherche sur les grands acteurs de la deuxième guerre mondiale. Si vous tapez la lettre D le programme doit proposer "De Gaulle" par exemple.

Le code de l'exemple

... <form> <p class ="remarque">Recherche sur les personnages de la deuxième guerre mondiale. <input type="text" id="recherche" /> </form> <script> var liste = [ "De Gaulle", "Churchill", "Hitler", "Mussolini", "Staline", "Roosevelt" ]; $('#recherche').autocomplete({source : liste, minLength : 2}); ...

Attention il faut télécharger la feuille de style de jQueryUI afin qu'il y ait une mise en forme de la liste de suggestion !

Script :
La méthode autocomplete a une option obligatoire : la source. Dans l'exemple la source est la variable liste.
Ici il y a aussi une option facultative : minLength : nombre minimal de caractères à saisir pour afficher une liste de suggestions.
Testez la méthode autocomplete !

La source peut être une liste externe ; un fichier par exemple.
Dans ce cas la valeur de l'argument source est une requête AJAX !
Retour menu