jQuery : extension jQuery UI

On ne peut pas tout faire avec la librairie de base de 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 ou encore des "greffons". L'extension la plus célèbre est jQuery UI (UI : comme interface utilisateur). Dans cette page je vais présenter les outils (ou widgets) de cette extension.

On dit que jQuery UI c'est un pack de "widgets" (composants graphiques).
Certains de ces outils deviendront moins utiles avec la montée en puissance de HTML & 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 un framework CSS. Si vous chargez dans vos pages uniquement le fichier d'extension .js de la librairie jQuery UI le résultat sera ... décevant. Il faut charger aussi la feuille de style du pack : jquery-ui.min.css !

Créer différents onglets dans une page

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

En HTML il faut créer une boite (balise SECTION) contenant trois boites "enfants" (balises ARTICLE).
Il faut aussi créer des liens vers chaque article.

Pour que l'aspect de la page soit modifiée radicalement (création d'onglets : un par article) il suffit d'appliquer à la boite principale la méthode tabs() de jQuery UI.

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 jQuery doit être chargée également !

Concernant le code HTML dans la partie BODY il est relativement simple.

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

Comprendre comment ça marche !

En fait jQuery UI ajoute des classes à certaines balises ; classes qui sont définies dans la feuille de style de la librairie jQuery.
C'est pour cette raison qu'il faut charger non seulement le fichier .js de la librairie mais aussi le fichier .css !

Avec les outils de développement du navigateur vous pouvez visualiser le code effectif de la page.
Extrait du code effectif de la page :

jQuery UI a ajouté aux éléments HTML différentes classes décrites dans le fichier .css du greffon.
C'est ainsi que les onglets et les boites sont mises en formes.

Utiliser le widget "accordéon"

Pour gérer une page volumineuse on peut aussi utiliser la méthode accordion().
Dans ce cadre la première partie est dépliée ; les autres parties sont repliées (on ne voit que le titre).
Si le visiteur 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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> <!-- inclusion des scripts de jquery et jquery UI --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script src="https://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 les deux fichiers d'extension ".js" et la feuille de style (avec la balise LINK) de l'extension.
Mais ici, afin d'obtenir les dernières versions stables, je fais un lien vers le serveur GOOGLE qui met à disposition les librairies jQuery, jQuery UI les plus récentes.
Attention saisissez bien "https" (et non pas "http") !

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 (balise A).
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 le widget "accordéon" !

Comprendre comment ça marche

Comme avec le widget "onglets", le widget "accordéon" ajoute aux éléments HTML des classes décrites dans le fichier .css de la librairie à condition d'avoir chargé la feuille de style "jquery-ui.css".
Dans l'exemple ci-dessous j'ai justement oublié de charger cette feuille de style.
Essayez cette page 'buguée' !

C'est beaucoup moins joli !
Par défaut les titres H2 sont mis en forme selon la feuille de style de mon site.

Solutions alternatives

La version 5 de HTML propose les balises DETAILS & SUMMARY.

EN CSS3 :
On peut imaginer par défaut, une boite d'un hauteur limitée avec le surplus de contenu masqué (overflow : hidden) et en cas de survol ajustement automatique de la hauteur au contenu (height : auto).

Redimensionner les boîtes

Passons maintenant à la troisième méthode du greffon : resizable().
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 <br>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"

Comprendre comment ça marche !

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

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 vous présenter 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).

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

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

HTML : insertion de quatre images et création d'une grande boite 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 ...

Vous pouvez constater que les images peuvent glisser partout car je n'ai pas paramétrer la méthode draggable().

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 boites 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 & déposer n'importe quel élément de la page.
Dans les exemples vous avez vu que l'on pouvait déplacer les images n'importe où dans l'écran.
Dans l'exemple ci-dessous les éléments "draggable" ne peuvent être glissés qu'à l'intérieur d'une grande boite car la méthode draggable() est paramétrée.
Essayez !

Le code correspondant

... <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();

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ébarrasser de la puce.

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

JAVASCRIPT :

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

Atelier

Etes vous capable de produire le code correspondant à l'exemple ci-dessous ?
Les images ne peuvent glisser qu'à l'intérieur de la boite "article" ; celle bordurée par un trait pointillé rouge.
Il s'agit d'une amélioration du premier exemple sur le glisser-déposer.
Exemple à tester !

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 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 Chrome puis avec Edge!

Le problème avec les champs de type date de HTML5 c'est qu'en ce début de l'année 2018 ce type n'est toujours pas implémenté chez certains navigateurs dont EDGE.
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 jQuery UI 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 les lettres "De" 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 jQuery UI 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 au menu