jQuery : une extension de 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 la librairie de base de jQuery. Mais heureusement il y a des extensions (appelées aussi "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.

jQuery UI

gestion des pages volumineuses (répartition du texte entre différents onglets OU mettre la page en "accordéon")
possibilité de redimensionner une boîte ou image
permuter des éléments dans une page
associer à un champ texte un calendrier pour la saisie facile d'une date
autocomplétion
le "glisser - déposer" (ou "drag & drop")

On dit que jQuery UI c'est un pack de "widgets" (composants graphiques)."Drag & drop" est le composant le plus utilisé.
Certains de ces widges deviendront progressivement moins utiles avec la montée en puissance de HTML, CSS mais aussi JS natif.

Récupérer cette extension

aller sur le site "jqueryui.com"
dans le cadre "Download" cliquez sur le bouton légendé "stable" (version stable)
vous récupérer un fichier zip
extrayez ce fichier zip

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

jquery-ui.min.js
jquery-ui.min.css

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 extension de jQuery, la librairie principale jQuery doit être chargée également.

la librairie principale (un fichier .js)
le fichier JS de jQuery UI
la feuille de style de jQuery UI

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

une liste de liens vers des ancres
chaque ancre connecte vers une balise ARTICLE

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

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

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".

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

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

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

	...
	<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.

Jquery UI

la méthode draggable() aux images
la méthode droppable() à la boîte DIV

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 ...) !

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.

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.

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 :

draggable()

cursor: "move" : le curseur change d'aspect dès que le "drag" commence
containment : "article" : les éléments "draggable" ne peuvent glisser qu'à l'intérieur de la boîte article
axis : "x" : le glisser ne peut se faire que selon l'axe horizontal

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

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.

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

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.
Cependant ce type n'est pas encore implémenté par tous les navigateurs ...

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.

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 !

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

jQuery : une extension de jQuery UI

Récupérer cette extension

Créer différents onglets dans une page

Le code de l'exemple

Comprendre comment ça marche !

Utiliser le widget "accordéon"

Le code de l'exemple (extrait)

Comprendre comment ça marche

Redimensionner les boîtes

Le code de l'exemple (extraits)

Comprendre comment ça marche !

Permuter des éléments de la page

Le code de l'exemple (extraits)

Glisser-déposer avec Jquery UI

Le code de l'exemple

Exercice

Paramétrer la méthode draggable

Le code correspondant

La saisie de dates

Exemple

Solution

Calendrier en français

Un widget obsolète ???

Autocomplétion

Le code de l'exemple