FAQ jQuery
FAQ jQueryConsultez toutes les FAQ
Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021
Sommaire→Plugins
[jQuery 1.5]
Exemples d'utilisation de jQuery.sub()jQuery.sub().
Crée une copie de l'objet jQuery. Les propriétés et les méthodes de la copie peuvent
être modifiées sans affecter l'original.
Notez bien que toutes les méthodes de la copie pointent toujours vers l'objet original.
La gestion des événements se fait toujours à travers l'original, de même pour la
gestion des données (data). Les requêtes Ajax et les événements se dérouleront
toujours par l'intermédiaire de l'objet jQuery original.
Il y a deux cas d'utilisation spécifiques pour lesquels $.sub() a été créé :
- fournir un moyen facile pour modifier les méthodes jQuery sans détruire complètement les méthodes d'origine ;
- donner un moyen pour faciliter l'encapsulation et pour définir un espace de noms pour les plugins jQuery.
On travaille à l'intérieur d'une clôture jQuery.sub().
Voir : Clôturez jQuery !Clôturez jQuery !
Exemple 1 : Ajout d'une méthode à une copie de jQuery pour qu'elle
ne soit pas disponible en dehors de la copie.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
/*
* On travaille à l'intérieur d'une clôture jQuery.sub()
*
* Voir : Clôturez jQuery !
* http://danielhagnoul.developpez.com/fondations/cloturer.php
*/
(function($){
$.fn.myCustomMethod = function(){
$(this).append("<p>Un mot pour remplir</p>");
};
$(function() {
$("#conteneur").myCustomMethod();
// function
console.log(typeof $().myCustomMethod);
});
})(jQuery.sub());
$(function(){
// undefined
console.log(typeof $().myCustomMethod);
});
</script>
</body>
</html>
Exemple 2 : Compléter des méthodes jQuery pour fournir de nouvelles fonctionnalités.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<button id="dvjhBtn">Go</button>
<p class="dvjhClassA">Un mot pour remplir</p>
<p class="dvjhClassB">Un mot pour remplir</p>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
/*
* On travaille à l'intérieur d'une clôture jQuery.sub()
*
* Voir : Clôturez jQuery !
* http://danielhagnoul.developpez.com/fondations/cloturer.php
*/
(function($){
/*
* L'objet jQuery original ne déclenche pas un
* événement "remove" lors de la suppression
* d'un élément. Cette fonctionnalité est
* uniquement contenue dans cette copie.
*/
$.fn.remove = function() {
// Nouvelle fonctionnalité: déclenchement de l'événement remove
this.trigger("remove");
// Vous devez toujours appeler la méthode originale
return jQuery.fn.remove.apply( this, arguments );
};
$(function() {
$("#dvjhBtn").click(function() {
$(this).parent().children(".dvjhClassA").remove();
});
// On attache l'événement remove à la division d'id conteneur
$("#conteneur").bind("remove", function(e) {
console.log(e.target);
});
});
})(jQuery.sub());
$(function(){
});
</script>
</body>
</html>
Exemple 3 : Créer un plugin qui retourne des méthodes spécifiques.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
.dvjhDisplayPlugin {
background-color:lightgreen;
}
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<div id="conteneur">
<button id="dvjhBtnID">On/Off</button>
<div>
<p class="dvjhClassA">Un mot pour remplir</p>
<p class="dvjhClassB">Un mot pour remplir</p>
</div>
</div>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
/*
* On travaille à l'intérieur d'une clôture jQuery.sub()
*
* Voir : Clôturez jQuery !
* http://danielhagnoul.developpez.com/fondations/cloturer.php
*/
(function($){
// Ajouter deux nouvelles méthodes au plugin
$.fn.extend({
open: function(){
return this.show();
},
close: function(){
return this.hide();
}
});
// Ajouter notre plugin sur l'objet jQuery original et lui donner un nom
jQuery.fn.dvjhDisplay = function(){
this.addClass("dvjhDisplayPlugin");
// Pour maintenir la chainabilité,
// nous devons toujours retourner notre plugin
return $(this);
};
})(jQuery.sub());
$(function(){
// on utilise le plugin dvjhDisplay sur la division qui suit
// notre bouton On/Off
$("#dvjhBtnID").toggle(
function(){
$(this).next().dvjhDisplay().close();
},
function(){
$(this).next().dvjhDisplay().open();
}
);
});
</script>
</body>
</html>Mis à jour le 16 octobre 2011 par danielhagnoul
[jQuery 1.5.1]
Ce n'est pas une tâche anodine, s'y atteler sans maîtriser les bases (CSS, HTML,
DOM, JavaScript, JSON, jQuery, et la gestion des événements) équivaut à partir en
expédition dans la jungle amazonienne sans l'équipement adéquat.
Vous ne trouverez donc ci-dessous aucune explication sur les matières réputées connues.
Un plugin nécessite généralement une méthode principale, une méthode
pour modifier la valeur des options et une méthode pour connaître la valeur des
options, ainsi que des méthodes privées pour la gestion des événements provoqués
par la méthode principale du plugin, par le changement de valeur d'une option et
par les actions de l'utisateur du plugin.
La gestion du contexte de this pose les problèmes habituels.
Lors du traitement des événements générés par l'utilisateur, il faut se rappeler
que l'élément activé par l'utilisateur est event.target.
Deux méthodes sont utilisables :
- On peut voir des exemples de plugin écrits avec la méthode de Mike AlsupMéthode de Mike Alsup sur Mon cahier d'exercices sur jQueryMon cahier d'exercices sur jQuery ;
- Depuis la sortie de jQuery 1.5, on peut construire un plugin en utilisant jQuery.sub(). Je vous recommande de lire Exemples d'utilisation de jQuery.sub() et d'examiner le code de l'exemple 3.
Voici le code de deux plugins utilisant jQuery.sub() : dvjhRotate et dvjhInputText.
Les méthodes et objets privés commencent par un underscore (souligné _).
Le plugin dvjhRotate utilise la propriété CSS3 "transform" pour appliquer une rotation à un élément du DOM.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
img {border:none; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
li {padding-bottom:6px; }
.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
#btnRotate {margin:12px; }
.divTest {width:400px; height:150px; margin:12px; padding:6px; border:1px solid grey;
background-color:lightgreen; }
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<section class="conteneur">
<button id="btnRotate">Tourne de 45 degrés !</button>
<div class="divTest">
<p>Un mot pour remplir</p>
</div>
</section>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
(function($){
var _Options = {
degrees: 0,
debug: true
};
var _avecStyle = function(self, matrix){
self.attr("style", "-moz-transform:" + matrix +
"; -webkit-transform:" + matrix +
"; -ms-transform:" + matrix +
"; -o-transform:" + matrix +
"; transform:" + matrix +
";");
};
var _setDegrees = function(self, value){
var v = parseInt(value, 10) || 0;
if (v != _Options.degrees){
_Options.degrees = v;
var rad = v * Math.PI * 2.0 / 360.0,
costheta = Math.cos(rad),
sintheta = Math.sin(rad),
a = parseFloat(costheta, 10).toFixed(8),
c = parseFloat(-sintheta, 10).toFixed(8),
b = parseFloat(sintheta, 10).toFixed(8),
d = parseFloat(costheta, 10).toFixed(8),
matrix = "matrix(" + a + ", " + b + ", " + c + ", " + d + ", 0, 0);";
_avecStyle(self, matrix);
var optionsChangedEvent = new $.Event("optionsChanged");
optionsChangedEvent.dvjh = {
initiateur: self,
optionsKey: "degrees",
optionsValue: v
};
self.trigger(optionsChangedEvent);
}
};
$.fn.extend({
plugin: function(options){
var self = this;
if (_Options.debug){
self.bind("optionsChanged", function(event){
var obj = event.dvjh,
el = obj.initiateur[0];
console.log("L'option " +
obj.optionsKey +
" a pris la valeur " +
obj.optionsValue +
" le " +
new Date(event.timeStamp).toLocaleString() +
" a la demande de l'élément " +
el.tagName +
" , ID = " +
el.id +
" , Class = " +
el.className);
});
}
if (options != undefined){
$.each(options, function(key, value){
self.pluginSetOptions(key, value);
});
} else {
// donner une valeur par défaut
self.pluginSetOptions("degrees", "45");
}
return this; // Indispensable !
},
pluginSetOptions: function(key, value){
switch(key){
case "degrees":
_setDegrees(this, value);
break;
default:
throw "L'option " + key + " n'existe pas";
};
return this; // Indispensable !
},
pluginGetOptions: function(key){
switch(key){
case "degrees":
return _Options.degrees;
break;
default:
throw "L'option " + key + " n'existe pas";
};
return this; // Indispensable !
}
});
jQuery.fn.dvjhRotate = function(options){
return $(this).plugin(options);
};
})(jQuery.sub());
$(function() {
$("#btnRotate").click(function(){
var objsRotate = $("div.divTest").dvjhRotate();
// objsRotate.pluginSetOptions("degrees", "-105");
});
});
</script>
</body>
</html>
Le plugin dvjhInputText agit sur des éléments INPUT de type texte
qui afficheront alors une valeur comprise entre 0 à 100 %. Il gère les modifications
apportées par l'utilisateur.
Sélectionnez
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta charset="utf-8">
<meta name="Author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<style>
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
img {border:none; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
li {padding-bottom:6px; }
.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
#dvjhMessagesID {
width:auto;
margin:6px;
padding:6px;
font-family:sans-serif;
font-size:0.8em;
border:1px solid grey;
}
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<section class="conteneur">
<input id="dvjhInputID" type="text"/>
<input class="dvjhClassTest" type="text"/>
<input type="text"/>
<div id="dvjhMessagesID"></div>
</section>
<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
(function($){
var _Options = {
pourcentage: 0,
debug: true
};
var _PluginCSS = {
"width":"120px",
"height":"3em",
"margin":"6px",
"padding":"0.5em",
"background-color":"lightgreen"
};
var _avecStyle = function(self){
self.css(_PluginCSS);
}
var _setPourcentage = function(self, value){
var v = parseInt(value, 10) || parseInt(self.data("data-prevVal"), 10) || 0;
if (v > 100){
v = 100;
} else if (v < 0){
v = 0;
}
self.val((_Options.pourcentage = v) + "%");
self.data("data-prevVal", _Options.pourcentage);
var optionsChangedEvent = new $.Event("optionsChanged");
optionsChangedEvent.dvjh = {
initiateur: self,
optionsKey: "pourcentage",
optionsValue: v
};
self.trigger(optionsChangedEvent);
};
$.fn.extend({
plugin: function(options){
var self = this;
if (_Options.debug){
self.bind("optionsChanged", function(event){
var obj = event.dvjh,
el = obj.initiateur[0];
console.log("L'option " +
obj.optionsKey +
" a pris la valeur " +
obj.optionsValue +
" le " +
new Date(event.timeStamp).toLocaleString() +
" a la demande de l'élément " +
el.tagName +
" , ID = " +
el.id +
" , Class = " +
el.className);
});
}
/*
* L'utilisateur a cliqué sur l'input
*/
self.toggle(
function(){
$(this).css({
color: "blue",
fontWeight: "bold"
});
return false;
},
function(){
$(this).css({
color: "red",
fontWeight: "normal"
});
return false;
}
);
/*
* L'utilisateur modifie le contenu de l'input (event.target)
*/
self.bind("change", function(event){
_setPourcentage($(event.target), $(event.target).val());
});
/*
* initialisation du plugin avec une valeur par défaut
*/
_avecStyle(self);
_Options.pourcentage = 50;
self.val(_Options.pourcentage + " %");
self.data("data-prevVal", _Options.pourcentage);
/*
* options ?
*/
if (options != undefined){
$.each(options, function(key, value){
self.pluginSetOptions(key, value);
});
}
return this; // Indispensable !
},
pluginSetOptions: function(key, value){
switch(key){
case "pourcentage":
_setPourcentage(this, value);
break;
default:
throw "L'option " + key + " n'existe pas";
};
return this; // Indispensable !
},
pluginGetOptions: function(key){
switch(key){
case "pourcentage":
return _Options.pourcentage;
break;
default:
throw "L'option " + key + " n'existe pas";
};
return this; // Indispensable !
}
});
jQuery.fn.dvjhInputText = function(options){
return $(this).plugin(options);
};
})(jQuery.sub());
$(function(){
// var obj = $("input").dvjhInputText({"pourcentage": 12});
var objsInput = $("input").dvjhInputText();
console.log(objsInput.pluginGetOptions("pourcentage"));
objsInput.eq(1).pluginSetOptions("pourcentage", 25);
objsInput.eq(2).pluginSetOptions("pourcentage", 130);
try {
objsInput.eq(0).pluginSetOptions("niveau", -12);
}
catch(er){
alert(er);
}
});
</script>
</body>
</html>Mis à jour le 16 octobre 2011 par danielhagnoul
Voici un plugin qui permet de jouer avec le contenu des champs de formulaires de type text et textarea, afin de palier à la non implémentation de placeholder sur les versions qui précèdent le HTML5. Ce dernier propose nativement ceci :
Sélectionnez
<input placeholder="saisissez votre pseudo" />
La technique du placeholder, c'est de pré-remplir un champs par
l'intitulé de la valeur qu'il doit recevoir. Par exemple, au chargement de la page,
le champs texte contient "saisissez votre pseudo". Lorsque le champs prend
le focus, il se vide. Lorsqu'il perd le focus, et qu'il est vide, il reprend la
valeur "saisissez votre pseudo". Si lors du focus il ne contient pas la
valeur par défaut, il reste inchangé.
Le plugin qui suit est un exemple de plus sur l'utilité de la méthode data() :
Sélectionnez
(function($){
$.fn.PlaceHolder = function(){
return this.each( function( i, item ){
var jObj = $(item);
if( jObj.attr( 'type' ) == 'text' ){
jObj.data( 'defaultValue', jObj.val() );
}
if( jObj.is( 'textarea' ) ){
jObj.data( 'defaultValue', jObj.html() );
}
jObj
.focus( function(){
if ( jObj.val() == jObj.data('defaultValue') ){
jObj.val('');
}
})
.blur( function(){
if ( jObj.val( )== "" ){
jObj.val( jObj.data('defaultValue') );
}
});
});
};
})(jQuery);
Voici un exemple d'utilisation :
Sélectionnez
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="PlaceHolder.js"></script>
<title>Nouvelle page 1</title>
<style type="text/css">
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#cadre {
width: 310px;
margin:auto;
margin-top:10%;
border: double grey;
}
.label { display:inline-block;
width:150px;}
textarea {
width:300px;
height:100px;
}
</style>
<script type="text/javascript">
$(function(){
$('.placeholder').PlaceHolder();
})
</script>
</head>
<body >
<div id="cadre">
<span class="label">Pseudo: </span><input type="text" class="placeholder" value="saisissez votre pseudo" /><br />
<span class="label" >Mot de passe: </span><input type="text" class="placeholder" value="saisissez votre mot de passe" /> <br />
<textarea class="placeholder" value="entrez votre texte" >entrez votre texte</textarea>
</div>
</body>
</html>