jQuery UI est une surcouche de jQuery qui propose des outils pour créer des interfaces graphiques interactives. Ses fonctionnalités se divisent en 3 catégories :
- Interactions
Elles permettent de donner des propriétés très intéressantes à des éléments HTML, comme le fait de pouvoir être attrapé et déplacé avec la souris (drag & drop), d'être redimensionné comme une fenêtre, ou encore d'être sélectionné comme des icônes sur le bureau de votre OS.
- Widgets
Les widgets sont des objets "clé en main " qui proposent des fonctionnalités de haut niveau comme le DatePicker par exemple, qui affiche un calendrier permettant de sélectionner une date.
- Effects
Ils enrichissement les effets par défaut proposés par jQuery que l'on a vus dans les chapitres précédents (fadeIn, slideUp...).
Grâce à jQuery UI, il est par exemple possible d'animer la propriété CSS background-color avec .animate(), chose qui n'est pas possible dans jQuery seul, ou encore d'ajouter des transitions lors des addClass/removeClass...
Pour utiliser jQuery UI, il faut bien entendu avoir inclus jQuery dans votre page web avec la balise <script> , mais il faut aussi ajouter le fichier .js de jQuery UI ainsi qu'une feuille de style.
En effet, jQuery UI fonctionne avec des thèmes (CSS), ces thèmes sont nécessaires pour afficher correctement les widgets notamment.
Aller, voici le code à mettre dans le <head> en utilisant le CDN Google API :
<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/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
Datepicker
On va commencer doucement avec le Datepicker, qui affiche un calendrier pour choisir une date.
<input type="text" id="datepicker">
jQuery(document).ready(function($){
$("#datepicker").datepicker();
});
Vous voyez que les mois sont affichés en Anglais (langue par défaut). Heureusement, il est parfaitement possible d'utiliser une traduction dans la langue de votre choix (il suffit d'une petite recherche sur Google).
Dans le cas présent, il suffit de mettre ce code JavaScript avant d'utiliser le datepicker, pour définir sa langue.
$.datepicker.regional['fr'] = {
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',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
Slider
Le slider jQuery est un widget qu'on utilise généralement dans les formulaires, pour permettre à l'utilisateur de sélectionner une valeur ou un intervalle de valeurs.
Pour l'exemple, on va prendre un cas concret en réalisant un slider permettant de définir une fourchette de prix.
Il va nous falloir 2 valeurs : le prix minimum et le prix maximum, donc on va créer le slider en mode range (traduction : "intervalle").
<form id="form"> <div><b>Fourchette de prix :</b></div><br/> <div id="bornes_prix">De <span id="prix_min"></span> à <span id="prix_max"></span> €</div> <div id="slider_prix"></div> </form>
jQuery(document).ready(function($){
// Création d'un slider dans l'élément id slider_prix
$("#slider_prix").slider({
range: true,
min: 0, // valeur min
max: 1000, // valeur max
values: [0, 600], // position des 2 curseurs à l'initialisation
// Action à effectuer lorsqu'on déplace l'un des curseur
slide: function(event, ui){
$('#prix_min').html(ui.values[0]);
$('#prix_max').html(ui.values[1]);
}
});
// Initialisation des valeurs numériques au chargement de la page
$('#prix_min').html($("#slider_prix").slider("values", 0));
$('#prix_max').html($("#slider_prix").slider("values", 1));
});
Drag & drop
Pour créer un drag & drop (glisser-déposer) avec jQuery UI, on utilise des interactions (draggable et droppable).
Ça va être un peu plus complexe que les widgets puisque les interactions ne fonctionnent pas "out of the box".
Nous allons prendre un exemple concret : 2 voitures et 2 personnages sur un parking, le but du jeu va être de pouvoir déplacer à la fois les voitures et les personnages, et aussi de pouvoir glisser-déposer un personnage dans une voiture (le faire monter dedans en quelque sorte).
Voici le code HTML des éléments que l'on va manipuler (vous trouverez le code CSS dans la source de l'exemple 3) :
<div id="parking"> <div id="voiture_bleue" class="voiture"></div> <div id="voiture_rouge" class="voiture horizontale"></div> <div id="boby" class="personnage"> <span class="nom">Boby</span> </div> <div id="jeanne" class="personnage"> <span class="nom">Jeanne</span> </div> </div>
Drag
La première chose que l'on va faire, c'est permettre de déplacer les personnages et les voitures avec la souris. Pour cela, on va utiliser l'interaction draggable.
Par ailleurs, on va s'arranger pour que l'utilisateur ne puisse pas déplacer un de ces éléments en dehors du parking, grâce au paramètre containment de l'interaction draggable :
jQuery(document).ready(function($){
$(".voiture").draggable({ containment: 'parent' });
$(".personnage").draggable({ containment: 'parent' });
});
Drop
Nous pouvons déplacer les éléments qui se trouvent dans le parking, maintenant il faut s'arranger pour pouvoir faire monter les personnages dans les voitures.
Pour cela, on va utiliser l'interaction droppable sur les voitures. Ça signifie qu'on va pouvoir déposer des éléments draggable dans les voitures, avec la souris.
jQuery(document).ready(function($){
$( ".voiture" ).draggable({ containment: 'parent' });
$( ".personnage" ).draggable({ containment: 'parent' });
$( "#voiture_rouge" ).droppable({
accept: "#jeanne", // Seul le personnage #jeanne peut monter dans la voiture rouge
drop: function( event, ui ) { // Action effectuée lorsqu'on dépose un élément dans la voiture rouge
// ui.draggable désigne l'élément déplacé, exemple : #jeanne ou #boby
ui.draggable.appendTo( $(this) ) // On place le personnage dans la voiture (au niveau du DOM)
.css({ // Positionnement CSS du personnage au centre de la voiture
left: '65px',
top: '15px'
})
.draggable({ containment: 'parent' }); // Le personnage ne peut plus sortir de la voiture
}
});
// On fait pareil pour la voiture bleue
$( "#voiture_bleue" ).droppable({
accept: "#jeanne, #boby",
drop: function( event, ui ) {
ui.draggable.appendTo( $(this) )
.css({
left: '25px',
top: '50px'
})
.draggable({ containment: 'parent' });
}
});
});
En pratique, le drag & drop peut être très utile pour effectuer des opérations qui seraient trop peu ergonomiques via des formulaires (comme déplacer des mails dans un dossier sur un webmail...).
Le mot de la fin
Ce cours sur jQuery est terminé, j'espère qu'il vous aura été utile pour débuter et acquérir les bases. Si vous bloquez, vous pouvez poser des questions sur le forum. N'oubliez pas de consulter la documentation jQuery qui est très bien fournie lorsque vous rencontrez des problèmes, c'est le premier reflex à avoir.
Allez donc jeter un oeil sur cette page : incorporer un modèle 3d dans une photographie.
Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.
j utilisais jusqu a présent des petits script jquery sans vraiment comprendre le code -
c est + limpide maintenant
SVP j ai une application trés urgente à faire,le probléme que j'ai c'est que j'arrive pas à lier entre le php et le javascript ,je sais que je dois utiliser Ajax mais j'arrive pas à trouver l'idée pour le faire, et si qqn peut m'aider je serai trés reconnaissant à lui.
par contre, j'imagine que les scripts vont changer de version un jour ou l'autre. Par exemple quand on écrit ça dans notre page HTML :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js";></script>
Quand le site fera évoluer son "jquery-ui.min.js" au-delà de la version 1.8.12 est-ce que mon script plantera ?
Si oui, on peut remédier a ce problème ?
Après, c'est sûr que si un jour (dans quelques années) Google décide de faire un peu de ménage et de virer les vielles versions, ça ne fonctionnera plus.
En tout cas j'utilise le CDN Google depuis plusieurs années (2011 au moins), et je n'ai jamais eu le moindre problème.
Par contre j'ai eu récemment ce problème avec le bootstrap twitter, hébergé sur un CDN autre que Google (qui fait des modifs "sauvages").
Merci pour ces exemples, ça fait gagner un temps fou aux débutants comme moi tout en comprenant ce que l'on fait.
J'ai une question.
Sur ton exemple de slider avec les fourchettes de prix saurais-tu comment on peut modifier les paramètres d'une url lorsque l'on change les valeurs avec le slider?
Par exemple j'ai une url :
ventedebonbon.co/roudoudou?minprix=10&maxprix=100
je ne veux pas forcément utiliser ajax, un changement de page avec les nouveaux parametres irait bien.
Merci.
Il suffit d'utiliser des champs hidden pour ça, dans un formulaire en GET (method="get") qui cible la page courante (action="").
De cette manière, dès qu'on va submit le formulaire, la page courante va être rappelée avec les champs hidden en paramètre (minprix et maxprix).
Voici un exemple :
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" /> <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/jquery-ui.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#slider_prix').slider({ range: true, min: 0, max: 1000, values: [0, 600], slide: function(event, ui){ $('#prix_min').val(ui.values[0]); $('#prix_max').val(ui.values[1]); } }); }); </script> </head> <body> <form method="get" action=""> <div id="slider_prix"></div> <input type="hidden" name="minprix" id="prix_min" value="" /> <input type="hidden" name="maxprix" id="prix_max" value="" /> <input type="submit" value="Rechercher" /> </form> </body> </html>Bon décryptage.
Clair.
Accessible.
Bien rédigé.
J'ai aimé l'humour.
Bref merci beaucoup !
Petite note : dans ta page de comparateur de hdd ssd, le titre de la page est "Compatateur" ! c'est mignon, mais ce n'est peut-être pas ce que tu voulais y mettre.