Coursj Query Plugin

jQuery : les plugins
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
elmouelhi.achref@gmail.com
H & H: Research and Training 1 / 62

Plan
1 Introduction
2 Exemples de plugin
Fancybox
Websanova Color Picker
FlexSlider
GMap
Autres plugins
3 jQuery UI
Drag and drop
Resizable
Dialog
Onglet
4 Création d’un plugin

Introduction
jQuery
Plugin jQuery
jQuery est extensible en installant de nouveaux modules (plugins)
I ©
plugin ⇒ : extension de jQuery ≡ ensemble de fichiers contenant :
H
U EL
O
LM
code CSS
e f E
code JavaScript (ou jQuery)
r
A ch Web
images et ressources
©
proposant des fonctionnalités prêtes à l’emploi
utilisable comme une méthode appelée à partir d’un objet jQuery :
$(selecteur).plugin(paramètres)

Introduction
jQuery
Où trouver des plugins jQuery ?
En cherchant sur Google (ou autre moteur de recherche)

En consultant certaines plusieurs plateformes
H I ©
https://plugins.jquery.com/
UEL
O
http://www.bestjquery.com/
f E LM
...
ch r e
©A

Introduction
jQuery
Où trouver des plugins jQuery ?
En cherchant sur Google (ou autre moteur de recherche)

En consultant certaines plusieurs plateformes
H I ©
https://plugins.jquery.com/
UEL
O
http://www.bestjquery.com/
f E LM
...
ch r e
©A
Remarque
Il est possible de créer son propre plugin

Introduction
jQuery
Comment utiliser un plugin ? (très simple)
H I ©
EL
Chaque plugin dispose d’une page web
Chaque page web contient :
M OU
un lien pour téléchargerE
f Lfichiers de ce plugin
les
e
chr(+ un exemple)
A
une description
© é avec les navigateurs et les versions de jQuery
la compatibilit

Exemples de plugin Fancybox
jQuery
Fancybox
H I ©
EL
https://fancyapps.com/fancybox/3/
Permettant de
M OU
f E
afficher des fenêtres type Lmodale pour simuler l’ouverture de
popups
chr e
afficher A
© une image en taille réelle au clic sur une miniature.

jQuery
Pour utiliser Fancybox, il faut référencer un fichier CSS et un deuxième JS
<!DOCTYPE html>
<html>
<head>
<title>jQuery plugin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/
H I ©
EL
fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<style>
O U
LM
img {
width: 200px;
height:200px;
r e f E
}
ch
</style>
</head> ©A
<body>
<script src="//chemin/vers/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3
.5.7/dist/jquery.fancybox.min.js"></script>
</body>
</html>
jQuery
Plaçons nos images cliquables dans une balise div ayant la
classe imglist
<div class="imglist">
<a href="http://www.lsis.org/elmouelhia/images/
Barcelone.jpg" data-fancybox="gallery" data-
H I ©
caption="Barcelone">
UEL
O
<img src="http://www.lsis.org/elmouelhia/images/
Barcelone.jpg" alt="" />
f E LM
</a>
ch r e
©A
<a href="http://www.lsis.org/elmouelhia/images/
Bruxelles.jpg" data-fancybox="gallery" data-
caption="Bruxelles">
<img src="http://www.lsis.org/elmouelhia/images/
Bruxelles.jpg" alt="" />
</a>
</div>
Exemples de plugin Websanova Color Picker
jQuery
Websanova Color Picker

H I ©
http://wcolorpicker.websanova.com/U EL
L MO
r e f E
disposant d’un panneau de couleur
ch de couleur
offrant un sélecteur
A
©

jQuery
Pour utiliser Websanova Color Picker, il faut télécharger puis référencer un
fichier CSS et un deuxième JS. La zone de saisie permettra de récupérer le code
hexadécimal de la couleur sélectionnée
<!DOCTYPE html>
<html>
<head>
H I ©
EL
<title>jQuery Plugin</title>
<link rel="Stylesheet" type="text/css" href="./wColorPicker
O U
LM
-2.1.7/wColorPicker.min.css" />
</head>
<body>
r e f E
<div id="wcp1">
ch
©A
<input id="wcp-input" type="text"/><br/>
</div>
<script src="./wColorPicker-2.1.7/wColorPicker.min.js"></
script>
<script src="file.js"></script>
</body>
</html>
jQuery
Ce qu’il faut mettre dans file.js pour pouvoir modifier la
couleur de fond et la valeur de la zone texte en fonction de la
couleur choisie
$(function() {
$("#wcp1").wColorPicker({
H I ©
initColor: ’#ccf’,
U EL
onSelect: function(color){ O
E
$(’body’).css(’background’, color);
f LM
},
ch r e
©A
onMouseover: function(color){
$(’#wcp-input’).css(’background’, color).val
(color);
}
});
});

Exemples de plugin FlexSlider
jQuery
FlexSlider
H I ©
http://www.woothemes.com/flexslider
U EL
L
Permettant d’afficher un slider MO pour faire défiler des
responsive
r e
images avec différentesf E
options
A ch
©

Pour utiliser FlexSlider, il faut télécharger puis référencer un fichier CSS et un

deuxième JS et enfin préparer la liste d’images
<!DOCTYPE html>
<html>
<head>
<link rel="Stylesheet" href="./FlexSlider-master/flexslider.css" />
</head>
<body>
H I ©
EL
<div class="flexslider">
<ul class="slides">
O U
LM
<li> <img src="http://www.lsis.org/elmouelhia/images/SanFrancisco
.jpg" /> </li>
e f E
<li> <img src="http://www.lsis.org/elmouelhia/images/Bruxelles.
r
ch
jpg" /> </li>
©A
<li> <img src="http://www.lsis.org/elmouelhia/images/Seattle.jpg"
/> </li>
</ul>
</div>
<script src="./FlexSlider-master/jquery.flexslider.js"></script>
</body>
</html>

jQuery
Ce qu’il faut mettre dans file.js pour activer le slider

H I ©
UEL
$(window).load(function() {
O
$(’.flexslider’).flexslider();
f E LM
});
ch r e
©A

Exemples de plugin GMap
jQuery
GMap
https://hpneo.dev/gmaps/
permettant d’afficher
une carte géographique selon des coordonnées GPSH I ©
UEL
un pointeur sur une carte
O
un itinéraire
f E LM
ch r e
©A

jQuery
GMap
https://hpneo.dev/gmaps/
permettant d’afficher
une carte géographique selon des coordonnées GPSH I ©
UEL
un pointeur sur une carte
O
un itinéraire
f E LM
ch r e
©A
Remarque
Depuis 2017, les cartes Google fonctionnent avec une clé (API KEY).
Cette clé doit être associée à un compte de facturation (et donc une
carte bancaire).

jQuery
Si on veut afficher la position sur une carte Google Maps ?
Créer un projet Google Developers Console dans

https://console.developers.google.com/flows
/enableapi?apiid=maps backend&keyType=CLIENT SIDE H I ©
&reusekey=true&hl=fr&pli=1
U EL
M O
E
Utiliser la même page pour cr
f Léer une clé (sans aucune restriction
sur les protocoles) re
Activer ©la cléA
ch
en cherchant (dans la même interface en utilisant la
zone de recherche) Geocoding et Geolocating et en cliquant
chaque fois sur Activer
Copier la clé pour l’utiliser

jQuery
Pour utiliser Gmaps, il faut le télécharger puis le référencer avec API Maps de google
contenant la clé générée précédemment
<!DOCTYPE html>
<html>
<head>
<style>
H I ©
div {
width:500px;
UEL
O
LM
height:500px;
}
</style>
r e f E
</head>
ch
©A
<body>
<div id="map" ></div>
<script src="https://maps.googleapis.com/maps/api/js?key=coller-la-cl
é-ici"></script>
<script src="./gmaps-master/gmaps.js"></script>
</body>
</html>

jQuery
Pour afficher la carte dans div#map, il faut préciser les longitude
et latitude dans un objet GMaps dans file.js
$(document).ready(function(){
var map = new GMaps({
div: ’#map’,
H I ©
lat: 51.5073346,
UEL
O
LM
lng: -0.1276831,
});
r e f E
ch
});
©A

jQuery
Pour afficher la carte dans div#map, il faut préciser les longitude
et latitude dans un objet GMaps dans file.js
var map = new GMaps({
div: ’#map’,
H I ©
lat: 51.5073346,
UEL
O
LM
lng: -0.1276831,
});
r e f E
ch
});
©A
Remarque
On peut aussi ajouter autres champs comme zoom, title... dans
l’objet GMaps.
jQuery
Pour marquer un pointeur sur la carte, on utilise la méthode addMark()
map.addMarker({
lat: 51.518856,
lng: -0.1263371,
title: ’British Museum’,
H I ©
infoWindow: {
UEL
content:
O
}
f E LM
’The British Museum is a famous museum in London.’
});
ch r e
©A

jQuery
Pour marquer un pointeur sur la carte, on utilise la méthode addMark()
map.addMarker({
lat: 51.518856,
lng: -0.1263371,
title: ’British Museum’,
H I ©
infoWindow: {
UEL
content:
O
}
f E LM
’The British Museum is a famous museum in London.’
});
ch r e
©A
Remarque
On peut évidemment définir plusieurs pointeurs.

jQuery
Pour dessiner un itinéraire, on utilise la méthode drawRoute()
map.drawRoute({
origin: [latitude1, longitude1],
destination: [latitude2, longitude2],
travelMode: ’driving’,
strokeColor: ’red’,
strokeWeight: 6
H I ©
});
UEL
O
f E LM
ch r e
©A

jQuery
Pour dessiner un itinéraire, on utilise la méthode drawRoute()
map.drawRoute({
origin: [latitude1, longitude1],
destination: [latitude2, longitude2],
travelMode: ’driving’,
strokeColor: ’red’,
strokeWeight: 6
H I ©
});
UEL
O
f E LM
ch r e
Pour afficher la position du visiteur (géo-localisation)
©A
GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
map.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude,
title: ’You are here.’,
});
}
});
Exemples de plugin Autres plugins
jQuery
Autres plugins
jCarousel (http://sorgalla.com/jcarousel/) : Galerie d’images
Uploadify (http://www.uploadify.com) : Formulaire d’upload avec

indicateur de progression
H I ©
Noty (http://ned.im/noty/#/about) : Popup de L
U E notifications
L MO
jQuery Validator (https://jqueryvalidation.org/) : Validation de
formulaires web
r e f E
A c h
DataTables (https://datatables.net/) : Affichage et tri de données
complexes©
Isotope (http://isotope.metafizzy.co) : Pour filtrer et trier des éléments
HTML
Masonry (http://masonry.desandro.com) : Pour réorganiser et

d’imbriquer des éléments HTML de différentes hauteurs

jQuery UI
jQuery
jQuery UI (User Interface)

https://jqueryui.com/
I ©
un plugin jQuery très développé regroupant plusieurs plugins
H
accessibles via un seul fichier JS
U EL
O
f E LM
composé de plusieurs fichiers CSS et JS
permettant de
ch r e
©A
simplifier certaines tâches : drag and drop,
redimensionnement...
améliorer certains visuels
gérer le DOM

jQuery UI
jQuery
Comment intégrer jQuery UI dans notre fichier ?

H I ©
Comme pour jQuery
U EL
O
f E LM
soit en téléchargeant puis en faisant référence aux fichiers
nécessaires de jQuery UI
ch r e
©A
soit en utilisant une CDN

jQuery UI
jQuery
En se rendant sur (https://jqueryui.com/download/)

on remarque que
H I ©
on peut choisir un thème (il y en a plusieurs et on peut créer un
thème personnalisé)
U EL
M O
f E L fonctionnalités selon le besoin
on peut sélectionner quelques
c h re
©A

jQuery UI
jQuery
En se rendant sur (https://jqueryui.com/download/)

on remarque que
H I ©
on peut choisir un thème (il y en a plusieurs et on peut créer un
thème personnalisé)
U EL
M O
f E L fonctionnalités selon le besoin
on peut sélectionner quelques
c h re
©A
Remarque
Dans les deux cas, il faut référencer jQuery UI après jQuery

jQuery UI
jQuery
Contenu de la page index.html qui fait référence à jQuery et jQuery UI
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui
H I ©
/1.12.1/themes/smoothness/jquery-ui.css" />
</head>
U EL
O
LM
<body>
r e E
f
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"><
ch
©A
/script>
</body>
</html>

jQuery UI
jQuery
Contenu de la page index.html qui fait référence à jQuery et jQuery UI
<!DOCTYPE html>
<html>
<head>
H I ©
</head>
U EL
O
LM
<body>
r e E
f
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"><
ch
©A
/script>
</body>
</html>
Remarque
Ici on utilise le thème smoothness

jQuery UI Drag and drop
jQuery
Drag and drop (glisser-déposer)
un concept permettant de déplacer des éléments d’un conteneur

vers un autre
H I ©
U
existant depuis quelques temps dans les OSEL(déplacer un fichier
en le glissant avec la souris d’unM O vers un autre)
dossier
existant dans le web e f L
Eavant le HTML5 mais très compliqué
r bien
chHTML5
simplifié© AAPI
avec
encore plus simple avec jQuery UI
constitué de deux plugins : draggable et droppable

jQuery
Considérons les deux blocs element1 et element2 situés dans le bloc conteneur
<div id="conteneur" style="background-color:pink">
<div style="background-color:teal" class=element>element1</div>
<div style="background-color:gold" class=element>element2</div>
</div>
H I ©
U EL
O
f E LM
ch r e
©A

jQuery
</div>
H I ©
EL
Le CSS correspondant
#conteneur {
O U
LM
width:500px;
}
height:500px;
r e f E
.element {
ch
}
width:100px;
height:100px; ©A

jQuery
</div>
H I ©
EL
#conteneur {
O U
LM
width:500px;
}
height:500px;
r e f E
.element {
ch
}
width:100px;
height:100px; ©A
Objectif
Déplacer les éléments dans le conteneur

jQuery
Pour rendre les éléments déplaçables, il faut appeler le plugin
draggable dans file.js
$(’.element’).draggable();
});
H I ©
U EL
O
f E LM
ch r e
©A

jQuery
Pour rendre les éléments déplaçables, il faut appeler le plugin
draggable dans file.js
$(’.element’).draggable();
});
H I ©
U EL
M O
f E L selon un seul axe
Pour rendre les éléments déplaçables
h re
c
axis :© ’x’
A
$(’.element:first’).draggable({
});
$(’.element:last’).draggable({
axis : ’y’
});
});

jQuery
Pour rendre les éléments déplaçables seulement dans le

conteneur (en utilisant un sélecteur CSS, ici #conteneur)
$(’.element:first’).draggable({ H I ©
axis : ’x’,
U EL
O
containment : ’#conteneur’
});
f E LM
ch
$(’.element:last’).draggable({ r e
axis : ’y’,
©A
containment : ’#conteneur’
});
});

jQuery
On peut aussi utiliser la constante parent pour désigner le

conteneur
$(’.element:first’).draggable({ H I ©
axis : ’x’,
U EL
O
containment : ’parent’
});
f E LM
ch
$(’.element:last’).draggable({ r e
axis : ’y’,
©A
containment : ’parent’
});
});

jQuery
Pour ajouter un effet de magnétisme à un élément (dès qu’il

approche un deuxième élément, il se met sur le même niveau), on
ajoute la propriété snap
H I ©
U EL
containment : ’#conteneur’, O
snap : true
f E LM
});
ch r e
©A
containment : ’#conteneur’,
snap : true
});
});

jQuery
Pour remettre un élément à sa place initial dès qu’il est lâché

containment : ’#conteneur’, H I ©
snap : true
U EL
O
});
f E LM
ch
containment : ’#conteneur’, r e
snap : true,
revert : true
©A
});
});

jQuery
Il est possible de définir un pas de déplacement horizontal et

vertical
H I ©
U EL
O
$(’.element’).draggable({
grid : [50 , 50]
f E LM
});
ch r e
});
©A

jQuery
Quatre évènements liés aux déplacements

H I ©
create : se déclenche lorsque l’élément est créé
U EL
O
f E LM
start : se déclenche lorsqu’on démarre le déplacement
r e
drag : se déclenche pendant le déplacement
ch
©A
stop : se déclenche lorsqu’on arrête le déplacement

jQuery
Exemple
$(".element").draggable({
create: function(event,ui) {
console.log("create");
H I ©
},
U EL
start: function(event,ui) { O
console.log("start");
f E LM
},
stop: function(event,ui) {ch r e
},
©A
console.log("stop");
drag: function(event,ui) {
console.log("drag");
},
});
});
jQuery
Pour désactiver le déplacement, on considère l’exemple suivant

</div>
<button id=start> démarrer </button>
H I ©
EL
<button id=destroy> arrêter </button>
O U
f E LM
ch r e
©A

jQuery
Pour désactiver le déplacement, on considère l’exemple suivant

</div>
<button id=start> démarrer </button>
H I ©
EL
<button id=destroy> arrêter </button>
O U
f E LM
ch r e
Le code jQuery permettant d’activer et désactiver ce plugin
©A
$(’#start’).click(function(){
$(’div’).draggable();
});
$(’#destroy’).click(function(){
$(’div’).draggable(’destroy’);
});
});

jQuery
Considérons les trois blocs drag1, drag2 et drop
<div id=drag1 style="background-color:teal" class=element>drag1</div>
<div id=drag2 style="background-color:gold" class=element>drag2</div>
<div id="drop" style="background-color:pink">drop</div>
H I ©
U EL
O
f E LM
ch r e
©A

jQuery
H I ©
#drag1, #drag2 {
U EL
width:100px;
O
}
height:100px;
f E LM
#drop {
ch r e
©A
width:200px;
height:200px;
}

jQuery
H I ©
#drag1, #drag2 {
U EL
width:100px;
O
}
height:100px;
f E LM
#drop {
ch r e
©A
width:200px;
height:200px;
}
Objectif
Déclencher un traitement en déposant un élément déplaçable dans une zone de dépôt

jQuery
Pour déclarer une zone de dépôt, il suffit d’appeler le plugin

droppable
H I ©
$(’#drag1,#drag2’).draggable();
U EL
O
LM
$(’#drop’).droppable({
drop : function(){
r e f E
ch
alert(’élément déposé’);
}
}); ©A
});

jQuery
Pour déclarer une zone de dépôt, on ajoute le paramètre accept

H I ©
U EL
O
LM
accept : ’#drag1’,
drop : function(){
r e f E
ch
}
}); ©A
});

jQuery
Le paramètre revert
la valeur valid permet à l’élément d’être renvoyé à sa place s’il est déposé dans une
zone de dépôt après avoir exécutée la fonction drop
la valeur invalid permet de garder l’élément s’il est déposé dans une zone de dépôt
H I ©
U EL
O
f E LM
ch r e
©A

jQuery
Le paramètre revert
la valeur valid permet à l’élément d’être renvoyé à sa place s’il est déposé dans une
zone de dépôt après avoir exécutée la fonction drop
la valeur invalid permet de garder l’élément s’il est déposé dans une zone de dépôt
H I ©
Exemple
U EL
O
$(’#drag1’).draggable({
f E LM
revert : ’valid’
ch r e
©A
});
$(’#drag2’).draggable({
revert : ’invalid’
});
drop : function(){
}
});
});
jQuery
Six évènements liés aux déplacements
create : se déclenche lorsqu’une zone de dépôt est créée
I ©
out : se déclenche lorsqu’un élément quitte la zone de dépôt
H
over : se déclenche lorsqu’un élémentU EL la zone de dépôt
survole
M O
f E
drop : se déclenche lorsqu’unL él ément est déposé la zone de
dépôt r e
cdhéclenche lorsqu’un élément commence à se
activate© A
: se
déplacer
deactivate : se déclenche lorsqu’un élément arrête de se
déplacer

Exemple
drop : function(){
console.log("drop");
},
create: function(event,ui) {
console.log("create");
H I ©
EL
},
out: function(event,ui) {
O U
LM
console.log("out");
},
over: function(event,ui) {
r e f E
ch
console.log("over");
©A
},
activate: function(event,ui) {
console.log("activate");
},
deactivate: function(event,ui) {
console.log("deactivate");
}
});
});

jQuery UI Resizable
jQuery
Resizable (redimensionnement) H I ©
UEL
O
un concept permettant de modifier la taille d’un élément HTML
f E LM
ch r e
réalisable avec le plugin Resizable
©A

jQuery UI Resizable
jQuery
</div>
H I ©
UEL
O
f E LM
ch r e
©A

jQuery UI Resizable
jQuery
</div>
H I ©
EL
#conteneur {
O U
LM
width: 500px;
}
height: 500px;
r e f E
.element {
ch
}
width: 100px;
height: 100px; ©A

jQuery UI Resizable
jQuery
</div>
H I ©
EL
#conteneur {
O U
LM
width: 500px;
}
height: 500px;
r e f E
.element {
ch
}
width: 100px;
height: 100px; ©A
Objectif
Redimensionner des éléments HTML

jQuery UI Resizable
jQuery
Pour pouvoir modifier la dimension d’un élément, il faut appeler
le plugin resizable dans file.js
$("div").resizable();
});
H I ©
UEL
O
f E LM
ch r e
©A

jQuery UI Resizable
jQuery
Pour pouvoir modifier la dimension d’un élément, il faut appeler
le plugin resizable dans file.js
$("div").resizable();
});
H I ©
UEL
O
f E LM
Pour préserver le c r e
h hauteur/largeur
ratio
© A
$("div").resizable({
aspectRatio : true
});
});

jQuery UI Resizable
jQuery
Pour définir une zone max de redimensionnement (qu’on ne peut dépasser)
$("#conteneur > div").resizable({
containment: "#conteneur"
});
});
H I ©
UEL
O
f E LM
ch r e
©A

jQuery UI Resizable
jQuery
});
});
H I ©
Pour définir un ratio hauteur/largeur (ici hauteur = largeur)
U EL
O
LM
aspectRatio : true
r e f E
});
ch
});
©A

jQuery UI Resizable
jQuery
});
});
H I ©
Pour définir un ratio hauteur/largeur (ici hauteur = largeur)
U EL
O
LM
aspectRatio : true
r e f E
});
ch
});
©A
Dans cet exemple : hauteur = 2 * largeur
aspectRatio : 1/2
});
});
jQuery UI Resizable
jQuery
On peut aussi définir les largeur et longueur max et min

H I ©
EL
maxWidth: 500,
O U
maxHeight: 400,
f E LM
minHeight: 50,
minWidth: 50 ch r e
});
});
©A

jQuery UI Resizable
jQuery
Il est possible de définir une classe CSS
<style>
.maClasse {
border : 1px solid black;
background : #eee;
opacity : 0.5;
H I ©
}
UEL
</style>
O
f E LM
ch r e
©A

jQuery UI Resizable
jQuery
Il est possible de définir une classe CSS
<style>
.maClasse {
border : 1px solid black;
background : #eee;
opacity : 0.5;
H I ©
}
UEL
</style>
O
f E LM
r e
ch CSS pendant le redimensionnement avec le
Et d’appeler cetteAclasse
©
paramètre helper
helper : ’maClasse’
});
});
jQuery UI Resizable
jQuery
Il est possible d’ajouter un effet animation (À ne pas confondre

avec la méthode animate() de jQuery)
H I ©
UEL
$("div").resizable({ O
helper : ’maClasse’,
f E LM
animate : true
ch r e
©A
});
});

jQuery UI Dialog
jQuery
Dialog (Boı̂te de dialogue), comment ça marche ? H I ©

UEL
O
on définit notre boı̂te avec son contenu
f E LM
ch r e
on gère l’affichage avec le plugin dialog de jQuery UI
©A

jQuery UI Dialog
jQuery
On définit notre boı̂te avec son contenu
<div id="boite" title="Ma première boı̂te de dialogue">
Ma boı̂te de dialogue est, par définition, redimensionnable et
déplaçable.
</div>
H I ©
UEL
O
f E LM
ch r e
©A

jQuery UI Dialog
jQuery
déplaçable.
</div>
H I ©
Pour l’afficher
UEL
O
$("#boite").dialog();
f E LM
});
ch r e
©A

jQuery UI Dialog
jQuery
déplaçable.
</div>
H I ©
Pour l’afficher
UEL
O
$("#boite").dialog();
f E LM
});
ch r e
©A
Constats
Le titre de la boı̂te n’est affiché qu’en partie
La boı̂te de dialogue s’ouvre au démarrage de la page

jQuery UI Dialog
jQuery
Pour modifier la dimension de la boı̂te
$("#boite").dialog({
width: 400,
height: 120
});
H I ©
});
UEL
O
f E LM
ch r e
©A

jQuery UI Dialog
jQuery
Pour modifier la dimension de la boı̂te
width: 400,
height: 120
});
H I ©
});
UEL
O
f E LM
ch r e
Pour ne pas ouvrir la boı̂te au chargement de la page
©A
width: 400,
height: 120,
autoOpen: false
});
});
jQuery UI Dialog
jQuery
On ajoute un bouton pour afficher la boı̂te
<button id=showDialog> afficher la boı̂te </button>
H I ©
UEL
O
f E LM
ch r e
©A

jQuery UI Dialog
jQuery
On ajoute un bouton pour afficher la boı̂te
<button id=showDialog> afficher la boı̂te </button>
Le code associé au bouton pour afficher la boı̂te

H I ©
$(document).ready(function(){ UEL
O
width: 400,
f E LM
height: 120,
ch r e
autoOpen: false
});
©A
$(’#showDialog’).click(function(){
$(’#boite’).dialog(’open’);
});
});
jQuery UI Dialog
On peut associer un ensemble de boutons à notre boı̂te de dialogue

width: 400,
height: 120,
autoOpen: false,
buttons: {
"Oui": function() {
H I ©
$(’body’).css(’background’, ’blue’);
UEL
$(this).dialog("close");
O
},
"Non": function() {
f E LM
ch r e
$(’body’).css(’background’, ’red’);
©A
}
}
});
});
});

jQuery UI Dialog
jQuery
On peut bloquer l’accès au reste de la page tant que la boı̂te est affichée
width: 400,
height: 120,
autoOpen: false,
modal: true
H I ©
buttons: {
"Oui": function() {
U EL
O
LM
$(’body’).css(’background’, ’blue’);
},
r e f E
"Non": function() {
ch
©A
$(’body’).css(’background’, ’red’);
}
}
});
});
});

jQuery UI Onglet
jQuery
Tabs (Onglets), comment ça marche ? H I ©

UEL
on définit une liste de liens O
f E LM
ch r e
on gère l’affichage avec le plugin tabs de jQuery UI
©A

jQuery UI Onglet
jQuery
<div id="onglets">
<ul>
<li><a href="#onglet1">Titre onglet 1</a></li>
H I ©
</ul>
UEL
O
<div id="onglet1">
f E LM
Contenu onglet1
</div> ch r e
<div id="onglet2">
Contenu onglet1
©A
</div>
<div id="onglet3">
Contenu onglet3
</div>
</div>
jQuery UI Onglet
jQuery
div > div {
height: 300px;
}
#onglet1{
background-color: teal;
H I ©
EL
}
#onglet2{
O U
LM
background-color: gold;
}
#onglet3{
r e f E
ch
©A
background-color: red;
}

jQuery UI Onglet
jQuery
div > div {
height: 300px;
}
#onglet1{
background-color: teal;
H I ©
EL
}
#onglet2{
O U
LM
background-color: gold;
}
#onglet3{
r e f E
ch
©A
background-color: red;
}
Pour afficher sous forme d’onglets

$(’#onglets’).tabs();
});
Création d’un plugin
jQuery
Pour créer un plugin
déclarer une fonction

associer cette fonction à l’objet jQuery (jQuery.fn)
H I ©
UEL
O
f E LM
ch r e
©A

jQuery
Pour créer un plugin
déclarer une fonction

associer cette fonction à l’objet jQuery (jQuery.fn)
H I ©
UEL
O
f E LM
Illustration
ch r e
©A
jQuery.fn.nomPlugin = function(param1, param2...)
{
// Les instructions
}

jQuery
Dans un fichier mesPlugins.js, on définit le plugin suivant qui permettra d’afficher un
texte comme un warning (en gras, couleur de fond rouge et couleur blanche pour le texte)
jQuery.fn.warningText = function(size) {
this.each(function() {
$(this).wrap(’<b></b>’)
.css("background-color","red")
.css("font-size",size+"px")
H I ©
.css("color","white");
UEL
});
O
LM
return this;
};
r e f E
ch
©A

jQuery
Dans un fichier mesPlugins.js, on définit le plugin suivant qui permettra d’afficher un
texte comme un warning (en gras, couleur de fond rouge et couleur blanche pour le texte)
jQuery.fn.warningText = function(size) {
this.each(function() {
$(this).wrap(’<b></b>’)
.css("background-color","red")
.css("font-size",size+"px")
H I ©
.css("color","white");
U EL
});
O
LM
return this;
};
r e f E
ch
©A
Remarques
this.each() permet de parcourir tous les éléments de la sélection
return this retourne l’objet jQuery après modification pour permettre un éventuel
chaı̂nage

Préparons notre code HTML

<!DOCTYPE html>
<html>
<head>
</head>
H I ©
<body>
UEL
<p>
O
</span>.
f E LM
Bonjour, ce n’est pas un <span class=warning> avertissement
ch r e
C’est juste pour vous montrer comment fonctionne mon
©A
nouveau plugin <span class=warning> avertissement </span
>.
</p>
<script src="mesPlugins.js"></script>
</body>
</html>

jQuery
Utilisons notre plugin pour afficher quelques avertissements en

H I ©
rouge
UEL
O
LM
$(’.warning’).warningText(20);
r e f E
});
ch
©A

Coursj Query Plugin

Transféré par

Droits d'auteur :

Formats disponibles

Vous aimerez peut-être aussi

Coursj Query Plugin

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

Coursj Query Plugin

Transféré par

Droits d'auteur :

Formats disponibles

jQuery : les plugins

Docteur de l’université d’Aix-Marseille

H & H: Research and Training 1 / 62

H & H: Research and Training 2 / 62

jQuery est extensible en installant de nouveaux modules (plugins)

H & H: Research and Training 3 / 62

Où trouver des plugins jQuery ?

En cherchant sur Google (ou autre moteur de recherche)

H & H: Research and Training 4 / 62

Où trouver des plugins jQuery ?

En cherchant sur Google (ou autre moteur de recherche)

Il est possible de créer son propre plugin

H & H: Research and Training 4 / 62

Comment utiliser un plugin ? (très simple)

H & H: Research and Training 5 / 62

H & H: Research and Training 6 / 62

Websanova Color Picker

H & H: Research and Training 9 / 62

H & H: Research and Training 11 / 62

H & H: Research and Training 12 / 62

Pour utiliser FlexSlider, il faut télécharger puis référencer un fichier CSS et un

H & H: Research and Training 13 / 62

Ce qu’il faut mettre dans file.js pour activer le slider

H & H: Research and Training 14 / 62

H & H: Research and Training 15 / 62

H & H: Research and Training 15 / 62

Si on veut afficher la position sur une carte Google Maps ?

Créer un projet Google Developers Console dans

H & H: Research and Training 16 / 62

H & H: Research and Training 17 / 62

H & H: Research and Training 18 / 62

H & H: Research and Training 19 / 62

On peut évidemment définir plusieurs pointeurs.

H & H: Research and Training 19 / 62

H & H: Research and Training 20 / 62

jCarousel (http://sorgalla.com/jcarousel/) : Galerie d’images

Uploadify (http://www.uploadify.com) : Formulaire d’upload avec

Masonry (http://masonry.desandro.com) : Pour réorganiser et

H & H: Research and Training 21 / 62

jQuery UI (User Interface)

H & H: Research and Training 22 / 62

Comment intégrer jQuery UI dans notre fichier ?

H & H: Research and Training 23 / 62

En se rendant sur (https://jqueryui.com/download/)

H & H: Research and Training 24 / 62

En se rendant sur (https://jqueryui.com/download/)

Dans les deux cas, il faut référencer jQuery UI après jQuery

H & H: Research and Training 24 / 62

H & H: Research and Training 25 / 62

Ici on utilise le thème smoothness

H & H: Research and Training 25 / 62

Drag and drop (glisser-déposer)

un concept permettant de déplacer des éléments d’un conteneur

H & H: Research and Training 26 / 62

H & H: Research and Training 27 / 62

H & H: Research and Training 27 / 62

Déplacer les éléments dans le conteneur

H & H: Research and Training 27 / 62