Vous êtes sur la page 1sur 89

jQuery : les plugins

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille


Chercheur en programmation par contrainte (IA)
Ingénieur en gé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 Création d’un plugin

H & H: Research and Training 2 / 62


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 fonctionnalités prêtes à l’emploi
utilisable comme une méthode appelée à partir d’un objet jQuery :
$(selecteur).plugin(paramètres)

H & H: Research and Training 3 / 62


Introduction

jQuery

Où 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

H & H: Research and Training 4 / 62


Introduction

jQuery

Où 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 créer son propre plugin

H & H: Research and Training 4 / 62


Introduction

jQuery

Comment utiliser un plugin ? (très simple)

H I ©
EL
Chaque plugin dispose d’une page web
Chaque page web contient :
M OU
un lien pour téléchargerE
f Lfichiers de ce plugin
les
e
chr(+ un exemple)
A
une description
© é avec les navigateurs et les versions de jQuery
la compatibilit

H & H: Research and Training 5 / 62


Exemples de plugin Fancybox

jQuery

Fancybox

H I ©
EL
https://fancyapps.com/fancybox/3/
Permettant de
M OU
f E
afficher des fenêtres type Lmodale pour simuler l’ouverture de
popups
chr e
afficher A
© une image en taille réelle au clic sur une miniature.

H & H: Research and Training 6 / 62


Exemples de plugin Fancybox

jQuery
Pour utiliser Fancybox, il faut référencer un fichier CSS et un deuxiè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>
H & H: Research and Training 7 / 62
Exemples de plugin Fancybox

jQuery
Plaç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>
H & H: Research and Training 8 / 62
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 sélecteur
A
©

H & H: Research and Training 9 / 62


Exemples de plugin Websanova Color Picker

jQuery
Pour utiliser Websanova Color Picker, il faut télécharger puis référencer un
fichier CSS et un deuxième JS. La zone de saisie permettra de récupérer le code
hexadécimal de la couleur sélectionné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="//chemin/vers/jquery.js"></script>
<script src="./wColorPicker-2.1.7/wColorPicker.min.js"></
script>
<script src="file.js"></script>
</body>
</html>
H & H: Research and Training 10 / 62
Exemples de plugin Websanova Color Picker

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);
}
});
});

H & H: Research and Training 11 / 62


Exemples de plugin FlexSlider

jQuery

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

H & H: Research and Training 12 / 62


Exemples de plugin FlexSlider

Pour utiliser FlexSlider, il faut télécharger puis référencer un fichier CSS et un


deuxième JS et enfin préparer la liste d’images

<!DOCTYPE html>
<html>
<head>
<title>jQuery Plugin</title>
<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="//chemin/vers/jquery.js"></script>
<script src="./FlexSlider-master/jquery.flexslider.js"></script>
<script src="file.js"></script>
</body>
</html>

H & H: Research and Training 13 / 62


Exemples de plugin FlexSlider

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

H & H: Research and Training 14 / 62


Exemples de plugin GMap

jQuery
GMap
https://hpneo.dev/gmaps/
permettant d’afficher
une carte géographique selon des coordonnées GPSH I ©
UEL
un pointeur sur une carte
O
un itinéraire
f E LM
ch r e
©A

H & H: Research and Training 15 / 62


Exemples de plugin GMap

jQuery
GMap
https://hpneo.dev/gmaps/
permettant d’afficher
une carte géographique selon des coordonnées GPSH I ©
UEL
un pointeur sur une carte
O
un itinéraire
f E LM
ch r e
©A
Remarque

Depuis 2017, les cartes Google fonctionnent avec une clé (API KEY).
Cette clé doit être associée à un compte de facturation (et donc une
carte bancaire).

H & H: Research and Training 15 / 62


Exemples de plugin GMap

jQuery

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

Cré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 même page pour cr
f Léer une clé (sans aucune restriction
sur les protocoles) re
Activer ©la cléA
ch
en cherchant (dans la même interface en utilisant la
zone de recherche) Geocoding et Geolocating et en cliquant
chaque fois sur Activer
Copier la clé pour l’utiliser

H & H: Research and Training 16 / 62


Exemples de plugin GMap

jQuery
Pour utiliser Gmaps, il faut le télécharger puis le référencer avec API Maps de google
contenant la clé générée précédemment
<!DOCTYPE html>
<html>
<head>
<title>jQuery Plugin</title>
<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="//chemin/vers/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=coller-la-cl
é-ici"></script>
<script src="./gmaps-master/gmaps.js"></script>
<script src="file.js"></script>
</body>
</html>

H & H: Research and Training 17 / 62


Exemples de plugin GMap

jQuery
Pour afficher la carte dans div#map, il faut pré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

H & H: Research and Training 18 / 62


Exemples de plugin GMap

jQuery
Pour afficher la carte dans div#map, il faut pré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
Remarque
On peut aussi ajouter autres champs comme zoom, title... dans
l’objet GMaps.
H & H: Research and Training 18 / 62
Exemples de plugin GMap

jQuery
Pour marquer un pointeur sur la carte, on utilise la mé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

H & H: Research and Training 19 / 62


Exemples de plugin GMap

jQuery
Pour marquer un pointeur sur la carte, on utilise la mé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 évidemment définir plusieurs pointeurs.

H & H: Research and Training 19 / 62


Exemples de plugin GMap

jQuery
Pour dessiner un itinéraire, on utilise la mé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

H & H: Research and Training 20 / 62


Exemples de plugin GMap

jQuery
Pour dessiner un itinéraire, on utilise la mé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 (gé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.’,
});
}
});
H & H: Research and Training 20 / 62
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 données
complexes©
Isotope (http://isotope.metafizzy.co) : Pour filtrer et trier des éléments
HTML

Masonry (http://masonry.desandro.com) : Pour réorganiser et


d’imbriquer des éléments HTML de différentes hauteurs

H & H: Research and Training 21 / 62


jQuery UI

jQuery

jQuery UI (User Interface)


https://jqueryui.com/

I ©
un plugin jQuery très développé regroupant plusieurs plugins
H
accessibles via un seul fichier JS
U EL
O
f E LM
composé de plusieurs fichiers CSS et JS
permettant de
ch r e
©A
simplifier certaines tâches : drag and drop,
redimensionnement...
améliorer certains visuels
gérer le DOM

H & H: Research and Training 22 / 62


jQuery UI

jQuery

Comment intégrer jQuery UI dans notre fichier ?


H I ©
Comme pour jQuery
U EL
O
f E LM
soit en téléchargeant puis en faisant référence aux fichiers
nécessaires de jQuery UI
ch r e
©A
soit en utilisant une CDN

H & H: Research and Training 23 / 62


jQuery UI

jQuery

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


on remarque que

H I ©
on peut choisir un thème (il y en a plusieurs et on peut créer un
thème personnalisé)
U EL
M O
f E L fonctionnalités selon le besoin
on peut sélectionner quelques

c h re
©A

H & H: Research and Training 24 / 62


jQuery UI

jQuery

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


on remarque que

H I ©
on peut choisir un thème (il y en a plusieurs et on peut créer un
thème personnalisé)
U EL
M O
f E L fonctionnalités selon le besoin
on peut sélectionner quelques

c h re
©A
Remarque

Dans les deux cas, il faut référencer jQuery UI après jQuery

H & H: Research and Training 24 / 62


jQuery UI

jQuery
Contenu de la page index.html qui fait référence à 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
<script src="//chemin/vers/jquery.js"></script>
f
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"><
ch
©A
/script>
<script src="file.js"></script>
</body>
</html>

H & H: Research and Training 25 / 62


jQuery UI

jQuery
Contenu de la page index.html qui fait référence à 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
<script src="//chemin/vers/jquery.js"></script>
f
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"><
ch
©A
/script>
<script src="file.js"></script>
</body>
</html>

Remarque

Ici on utilise le thème smoothness

H & H: Research and Training 25 / 62


jQuery UI Drag and drop

jQuery

Drag and drop (glisser-déposer)

un concept permettant de déplacer des éléments d’un conteneur


vers un autre
H I ©
U
existant depuis quelques temps dans les OSEL(dé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 très compliqué
r bien
chHTML5
simplifié© AAPI
avec
encore plus simple avec jQuery UI
constitué de deux plugins : draggable et droppable

H & H: Research and Training 26 / 62


jQuery UI Drag and drop

jQuery
Considérons les deux blocs element1 et element2 situé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

H & H: Research and Training 27 / 62


jQuery UI Drag and drop

jQuery
Considérons les deux blocs element1 et element2 situé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 ©
EL
Le CSS correspondant
#conteneur {
O U
LM
width:500px;

}
height:500px;

r e f E
.element {
ch
}
width:100px;
height:100px; ©A

H & H: Research and Training 27 / 62


jQuery UI Drag and drop

jQuery
Considérons les deux blocs element1 et element2 situé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 ©
EL
Le CSS correspondant
#conteneur {
O U
LM
width:500px;

}
height:500px;

r e f E
.element {
ch
}
width:100px;
height:100px; ©A

Objectif

Déplacer les éléments dans le conteneur

H & H: Research and Training 27 / 62


jQuery UI Drag and drop

jQuery
Pour rendre les éléments déplaçables, il faut appeler le plugin
draggable dans file.js
$(document).ready(function(){
$(’.element’).draggable();
});
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 28 / 62


jQuery UI Drag and drop

jQuery
Pour rendre les éléments déplaçables, il faut appeler le plugin
draggable dans file.js
$(document).ready(function(){
$(’.element’).draggable();
});
H I ©
U EL
M O
f E L selon un seul axe
Pour rendre les éléments déplaçables

h re
$(document).ready(function(){
c
axis :© ’x’
A
$(’.element:first’).draggable({

});
$(’.element:last’).draggable({
axis : ’y’
});
});

H & H: Research and Training 28 / 62


jQuery UI Drag and drop

jQuery

Pour rendre les éléments déplaçables seulement dans le


conteneur (en utilisant un sélecteur CSS, ici #conteneur)
$(document).ready(function(){
$(’.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’
});
});

H & H: Research and Training 29 / 62


jQuery UI Drag and drop

jQuery

On peut aussi utiliser la constante parent pour désigner le


conteneur
$(document).ready(function(){
$(’.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’
});
});

H & H: Research and Training 30 / 62


jQuery UI Drag and drop

jQuery

Pour ajouter un effet de magnétisme à un élément (dès qu’il


approche un deuxième élément, il se met sur le même niveau), on
ajoute la propriété snap
$(document).ready(function(){
H I ©
$(’.element:first’).draggable({
U EL
containment : ’#conteneur’, O
snap : true
f E LM
});
ch r e
©A
$(’.element:last’).draggable({
containment : ’#conteneur’,
snap : true
});
});

H & H: Research and Training 31 / 62


jQuery UI Drag and drop

jQuery

Pour remettre un élément à sa place initial dès qu’il est lâché


$(document).ready(function(){
$(’.element:first’).draggable({
containment : ’#conteneur’, H I ©
snap : true
U EL
O
});
$(’.element:last’).draggable({
f E LM
ch
containment : ’#conteneur’, r e
snap : true,
revert : true
©A
});
});

H & H: Research and Training 32 / 62


jQuery UI Drag and drop

jQuery

Il est possible de définir un pas de déplacement horizontal et


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

H & H: Research and Training 33 / 62


jQuery UI Drag and drop

jQuery

Quatre évènements liés aux déplacements


H I ©
create : se déclenche lorsque l’élément est créé
U EL
O
f E LM
start : se déclenche lorsqu’on démarre le déplacement

r e
drag : se déclenche pendant le déplacement
ch
©A
stop : se déclenche lorsqu’on arrête le déplacement

H & H: Research and Training 34 / 62


jQuery UI Drag and drop

jQuery
Exemple
$(document).ready(function(){
$(".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");
},
});
});
H & H: Research and Training 35 / 62
jQuery UI Drag and drop

jQuery
Pour désactiver le déplacement, on considère l’exemple suivant

<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>
<button id=start> démarrer </button>
H I ©
EL
<button id=destroy> arrêter </button>

O U
f E LM
ch r e
©A

H & H: Research and Training 36 / 62


jQuery UI Drag and drop

jQuery
Pour désactiver le déplacement, on considère l’exemple suivant

<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>
<button id=start> démarrer </button>
H I ©
EL
<button id=destroy> arrêter </button>

O U
f E LM
ch r e
Le code jQuery permettant d’activer et désactiver ce plugin

©A
$(document).ready(function(){
$(’#start’).click(function(){
$(’div’).draggable();
});
$(’#destroy’).click(function(){
$(’div’).draggable(’destroy’);
});
});

H & H: Research and Training 36 / 62


jQuery UI Drag and drop

jQuery
Considé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

H & H: Research and Training 37 / 62


jQuery UI Drag and drop

jQuery
Considé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>

Le CSS correspondant
H I ©
#drag1, #drag2 {
U EL
width:100px;
O
}
height:100px;

f E LM
#drop {
ch r e
©A
width:200px;
height:200px;
}

H & H: Research and Training 37 / 62


jQuery UI Drag and drop

jQuery
Considé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>

Le CSS correspondant
H I ©
#drag1, #drag2 {
U EL
width:100px;
O
}
height:100px;

f E LM
#drop {
ch r e
©A
width:200px;
height:200px;
}

Objectif

Déclencher un traitement en déposant un élément déplaçable dans une zone de dépôt

H & H: Research and Training 37 / 62


jQuery UI Drag and drop

jQuery

Pour déclarer une zone de dépôt, il suffit d’appeler le plugin


droppable
$(document).ready(function(){
H I ©
$(’#drag1,#drag2’).draggable();
U EL
O
LM
$(’#drop’).droppable({
drop : function(){
r e f E
ch
alert(’élément déposé’);
}
}); ©A
});

H & H: Research and Training 38 / 62


jQuery UI Drag and drop

jQuery

Pour déclarer une zone de dépôt, on ajoute le paramètre accept


$(document).ready(function(){
$(’#drag1,#drag2’).draggable();
H I ©
$(’#drop’).droppable({
U EL
O
LM
accept : ’#drag1’,
drop : function(){
r e f E
ch
alert(’élément déposé’);
}
}); ©A
});

H & H: Research and Training 39 / 62


jQuery UI Drag and drop

jQuery
Le paramètre revert

la valeur valid permet à l’élément d’être renvoyé à sa place s’il est déposé dans une
zone de dépôt après avoir exécutée la fonction drop

la valeur invalid permet de garder l’élément s’il est déposé dans une zone de dépôt

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 40 / 62


jQuery UI Drag and drop

jQuery
Le paramètre revert

la valeur valid permet à l’élément d’être renvoyé à sa place s’il est déposé dans une
zone de dépôt après avoir exécutée la fonction drop

la valeur invalid permet de garder l’élément s’il est déposé dans une zone de dépôt

H I ©
Exemple
U EL
O
$(document).ready(function(){
$(’#drag1’).draggable({
f E LM
revert : ’valid’
ch r e
©A
});
$(’#drag2’).draggable({
revert : ’invalid’
});
$(’#drop’).droppable({
drop : function(){
alert(’élément déposé’);
}
});
});
H & H: Research and Training 40 / 62
jQuery UI Drag and drop

jQuery

Six évènements liés aux déplacements

create : se déclenche lorsqu’une zone de dépôt est créée

I ©
out : se déclenche lorsqu’un élément quitte la zone de dépôt
H
over : se déclenche lorsqu’un élémentU EL la zone de dépôt
survole
M O
f E
drop : se déclenche lorsqu’unL él ément est déposé la zone de
dépôt r e
cdhéclenche lorsqu’un élément commence à se
activate© A
: se
déplacer
deactivate : se déclenche lorsqu’un élément arrête de se
déplacer

H & H: Research and Training 41 / 62


jQuery UI Drag and drop

Exemple

$(document).ready(function(){
$(’#drag1,#drag2’).draggable();
$(’#drop’).droppable({
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");
}
});
});

H & H: Research and Training 42 / 62


jQuery UI Resizable

jQuery

Resizable (redimensionnement) H I ©
UEL
O
un concept permettant de modifier la taille d’un élément HTML

f E LM
ch r e
réalisable avec le plugin Resizable

©A

H & H: Research and Training 43 / 62


jQuery UI Resizable

jQuery
Considérons les deux blocs element1 et element2 situé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 ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 44 / 62


jQuery UI Resizable

jQuery
Considérons les deux blocs element1 et element2 situé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 ©
EL
Le CSS correspondant
#conteneur {
O U
LM
width: 500px;

}
height: 500px;

r e f E
.element {
ch
}
width: 100px;
height: 100px; ©A

H & H: Research and Training 44 / 62


jQuery UI Resizable

jQuery
Considérons les deux blocs element1 et element2 situé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 ©
EL
Le CSS correspondant
#conteneur {
O U
LM
width: 500px;

}
height: 500px;

r e f E
.element {
ch
}
width: 100px;
height: 100px; ©A

Objectif

Redimensionner des éléments HTML

H & H: Research and Training 44 / 62


jQuery UI Resizable

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

H & H: Research and Training 45 / 62


jQuery UI Resizable

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

H & H: Research and Training 45 / 62


jQuery UI Resizable

jQuery
Pour définir une zone max de redimensionnement (qu’on ne peut dépasser)
$(document).ready(function(){
$("#conteneur > div").resizable({
containment: "#conteneur"
});
});

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 46 / 62


jQuery UI Resizable

jQuery
Pour définir une zone max de redimensionnement (qu’on ne peut dépasser)
$(document).ready(function(){
$("#conteneur > div").resizable({
containment: "#conteneur"
});
});

H I ©
Pour définir un ratio hauteur/largeur (ici hauteur = largeur)
U EL
O
LM
$(document).ready(function(){
$("div").resizable({
aspectRatio : true
r e f E
});
ch
});
©A

H & H: Research and Training 46 / 62


jQuery UI Resizable

jQuery
Pour définir une zone max de redimensionnement (qu’on ne peut dépasser)
$(document).ready(function(){
$("#conteneur > div").resizable({
containment: "#conteneur"
});
});

H I ©
Pour définir un ratio hauteur/largeur (ici hauteur = largeur)
U EL
O
LM
$(document).ready(function(){
$("div").resizable({
aspectRatio : true
r e f E
});
ch
});
©A
Dans cet exemple : hauteur = 2 * largeur
$(document).ready(function(){
$("div").resizable({
aspectRatio : 1/2
});
});
H & H: Research and Training 46 / 62
jQuery UI Resizable

jQuery

On peut aussi définir les largeur et longueur max et min


$(document).ready(function(){
H I ©
EL
$("#conteneur > div").resizable({
maxWidth: 500,
O U
maxHeight: 400,
f E LM
minHeight: 50,
minWidth: 50 ch r e
});
});
©A

H & H: Research and Training 47 / 62


jQuery UI Resizable

jQuery
Il est possible de dé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

H & H: Research and Training 48 / 62


jQuery UI Resizable

jQuery
Il est possible de dé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
©
paramètre helper
$(document).ready(function(){
$("div").resizable({
helper : ’maClasse’
});
});
H & H: Research and Training 48 / 62
jQuery UI Resizable

jQuery

Il est possible d’ajouter un effet animation (À ne pas confondre


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

H & H: Research and Training 49 / 62


jQuery UI Dialog

jQuery

Dialog (Boı̂te de dialogue), comment ça marche ? H I ©


UEL
O
on définit notre boı̂te avec son contenu

f E LM
ch r e
on gère l’affichage avec le plugin dialog de jQuery UI

©A

H & H: Research and Training 50 / 62


jQuery UI Dialog

jQuery
On définit notre boı̂te avec son contenu
<div id="boite" title="Ma première boı̂te de dialogue">
Ma boı̂te de dialogue est, par définition, redimensionnable et
déplaçable.
</div>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 51 / 62


jQuery UI Dialog

jQuery
On définit notre boı̂te avec son contenu
<div id="boite" title="Ma première boı̂te de dialogue">
Ma boı̂te de dialogue est, par définition, redimensionnable et
déplaçable.
</div>

H I ©
Pour l’afficher
UEL
O
$(document).ready(function(){
$("#boite").dialog();
f E LM
});
ch r e
©A

H & H: Research and Training 51 / 62


jQuery UI Dialog

jQuery
On définit notre boı̂te avec son contenu
<div id="boite" title="Ma première boı̂te de dialogue">
Ma boı̂te de dialogue est, par définition, redimensionnable et
déplaçable.
</div>

H I ©
Pour l’afficher
UEL
O
$(document).ready(function(){
$("#boite").dialog();
f E LM
});
ch r e
©A
Constats

Le titre de la boı̂te n’est affiché qu’en partie

La boı̂te de dialogue s’ouvre au démarrage de la page

H & H: Research and Training 51 / 62


jQuery UI Dialog

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

H & H: Research and Training 52 / 62


jQuery UI Dialog

jQuery
Pour modifier la dimension de la boı̂te
$(document).ready(function(){
$("#boite").dialog({
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
$(document).ready(function(){
$("#boite").dialog({
width: 400,
height: 120,
autoOpen: false
});
});
H & H: Research and Training 52 / 62
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

H & H: Research and Training 53 / 62


jQuery UI Dialog

jQuery
On ajoute un bouton pour afficher la boı̂te
<button id=showDialog> afficher la boı̂te </button>

Le code associé au bouton pour afficher la boı̂te


H I ©
$(document).ready(function(){ UEL
O
$("#boite").dialog({
width: 400,
f E LM
height: 120,
ch r e
autoOpen: false
});
©A
$(’#showDialog’).click(function(){
$(’#boite’).dialog(’open’);
});
});
H & H: Research and Training 53 / 62
jQuery UI Dialog

On peut associer un ensemble de boutons à notre boı̂te de dialogue


$(document).ready(function(){
$("#boite").dialog({
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
$(this).dialog("close");
}
}
});
$(’#showDialog’).click(function(){
$(’#boite’).dialog(’open’);
});
});

H & H: Research and Training 54 / 62


jQuery UI Dialog

jQuery
On peut bloquer l’accès au reste de la page tant que la boı̂te est affichée
$(document).ready(function(){
$("#boite").dialog({
width: 400,
height: 120,
autoOpen: false,
modal: true
H I ©
buttons: {
"Oui": function() {
U EL
O
LM
$(’body’).css(’background’, ’blue’);

},
$(this).dialog("close");

r e f E
"Non": function() {
ch
©A
$(’body’).css(’background’, ’red’);
$(this).dialog("close");
}
}
});
$(’#showDialog’).click(function(){
$(’#boite’).dialog(’open’);
});
});

H & H: Research and Training 55 / 62


jQuery UI Onglet

jQuery

Tabs (Onglets), comment ça marche ? H I ©


UEL
on définit une liste de liens O
f E LM
ch r e
on gère l’affichage avec le plugin tabs de jQuery UI

©A

H & H: Research and Training 56 / 62


jQuery UI Onglet

jQuery
On définit notre boı̂te avec son contenu
<div id="onglets">
<ul>
<li><a href="#onglet1">Titre onglet 1</a></li>
<li><a href="#onglet2">Titre onglet 2</a></li>
<li><a href="#onglet3">Titre onglet 3</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>
H & H: Research and Training 57 / 62
jQuery UI Onglet

jQuery
Le CSS correspondant
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;
}

H & H: Research and Training 58 / 62


jQuery UI Onglet

jQuery
Le CSS correspondant
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


$(document).ready(function(){
$(’#onglets’).tabs();
});
H & H: Research and Training 58 / 62
Création d’un plugin

jQuery

Pour créer un plugin

déclarer une fonction


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

H & H: Research and Training 59 / 62


Création d’un plugin

jQuery

Pour créer un plugin

déclarer une fonction


associer cette fonction à 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
}

H & H: Research and Training 59 / 62


Création d’un plugin

jQuery
Dans un fichier mesPlugins.js, on dé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

H & H: Research and Training 60 / 62


Création d’un plugin

jQuery
Dans un fichier mesPlugins.js, on dé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 éléments de la sélection

return this retourne l’objet jQuery après modification pour permettre un éventuel
chaı̂nage

H & H: Research and Training 60 / 62


Création d’un plugin

Préparons notre code HTML


<!DOCTYPE html>
<html>
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui
/1.12.1/themes/smoothness/jquery-ui.css" />
</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="//chemin/vers/jquery.js"></script>
<script src="mesPlugins.js"></script>
<script src="file.js"></script>
</body>
</html>

H & H: Research and Training 61 / 62


Création d’un plugin

jQuery

Utilisons notre plugin pour afficher quelques avertissements en


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

H & H: Research and Training 62 / 62