par
libertux » 13 févr. 2014, 09:27
Bonjour,
Voilà un extrais de mon premier Tutoriel, Intitulé "JQuery : Créez votre propre Plugin."
Pouvez-vous me donner des conseilles?
IE : je suis encore à la recherche de rédacteurs, administrateurs, modérateurs pour le projet.
Merci,
Début de l'extrais:
Les Plugins JQuery
Les Plugins nous permettent d’étendre les fonctionnalités de la bibliothèque JQuery, il existe bon nombre de Plugins qui fournissent des options pour pratiquement tout ce dont vous pourriez avoir besoin dans votre code JavaScript. Le codage d’un Plugin peut être simple en se résument à une fonction JavaScript ou bien assez complexe en offrant des fonctionnalités avancées, en fait tout dépend du besoin du projet en question.
Objectifs
Dans ce tutoriel, nous allons codé un Plugin JQuery simple mais hautement configurable qui ajoute un effet de survole aux images qui composent un élément choisit. Notre Plugin utilise un masque composé d’une icône et d’une couleur d’arrière-plan, ces deux éléments serons paramétrables pour ajouter un niveau de flexibilité a notre Plugin.
Squelette de notre Plugin
Pour notre Plugin nous allons utiliser le squelette suivant :
[javascript];(function( $, window, document, undefined ){
// constructeur du Plugin
var Plugin = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
// Utilisation des HTML5 data attributes
// Ainsi notre Plugin pourra extraire les paramètres a partir de ces attributs
// Par exemple :
// <div data-plugin-options='{"option":"valeur"}'></div>
this.metadata = this.$elem.data( "plugin-options" );
};
Plugin.prototype = {
defaults: {
option: "valeur!"
},
init: function() {
// Surcharge des valeurs par défaut par ceux passé en paramétre!
this.config = $.extend({}, this.defaults, this.options, this.metadata);
// Utilisation:
// $('#elem').plugin({ option: 'Valeur!'});
// ou
// var p = new Plugin(document.getElementById('elem'),
// { option: 'Valeur!'}).init()
// oubien, définir manuellement les valeur par defaut :
// Plugin.defaults.option = 'valeur!'
this.initialise();
return this;
},
initialise: function() {
// ie : afficher la valeur de l'option par defaut
// console.log(this.config.option);
}
};
Plugin.defaults = Plugin.prototype.defaults;
$.fn.plugin = function(options) {
return this.each(function() {
new Plugin(this, options).init();
});
};
})( jQuery, window , document );
[/javascript]
Ce modèle de Plugin fait partie d’une collection de squelettes offert gratuitement par « Zeno Rocha » que vous pouvez la télécharger gratuitement ici :
https://github.com/jquery-boilerplate/jquery-patterns
Cette collection offre des squelettes adaptés a plusieurs situations d’utilisation et de codages de Plugin Jquery. Le code précédent est le modèle adapté au codage de Plugins qui offrent une flexibilité maximale de paramétrage que vous pouvez trouver dans le package sous le nom de « jquery.highly-configurable.plugin.boilerplate.js »
Le code précédent est suffisamment commenté pour vous permettre de comprendre sa structure mais, si vous avez des difficultés à assimiler n’importe quel bout de code veuillez ajouter un commentaire pour pouvoir vous répondre.
Le Plugin
Il est temps de commencer le codage de notre plugin
Pour commencer nous allons nommer notre Plugin « surveff » pour cela il faut renommer la variable « Plugin » et/ou « plugin » en « Surveff » dans le fichier « surveff.js » , notez bien que vous pouviez choisir le nom que vous voulez pour le vôtre, mais il faut choisir toujours un nom en relation avec le fonctionnement du Plugin.
Maintenant il faut avoir un fichier HTML (index.html), un fichier CSS (style.css) et notre fichier JavaScript (surveff.js) donc notre structure fichier ressemblera à :
image ici
Dans le <body> de notre fichier HTML, ajoutez le code suivant :
...
<div>
<div>
<span></span>
<img src="" />
</div>
</div>
...
Cette structure est simple, nous avons un conteneur pour nos images:
...
<div></div>
...
Ce conteneur englobe toutes nos images et c’est lui que notre Plugin affectera, bien évidemment c’est le choix du tutoriel mais, vous pouvez étendre la zone d’activité du Plugin à la totalité du document, on verra ça plus loin.
Puis nous avons un autre conteneur:
...
<div></div>
...
Qui regroupe un élément:
...
<span></span>
...
Qui sera le masque a appliqué sur l’image, et puis l’image en question:
...
<img src=" " />
...
Maintenant, nous allons avoir besoin de trois images:
Une qui sera notre image principale sur laquelle notre Plugin va ajouter l’effet de survole.
Une deuxième qui sera l’image au centré dans le masque.
Une troisième qui va nous permettre de tester la possibilité de changer l’image au centre du masque via les paramètres.
Dans notre exemple, nous allons utiliser ces deux images comme image principale pour tester si notre plugin adapte le masque sur des images de dimensions différentes:
Fin de l'extrais:Bonjour,
Voilà un extrais de mon premier Tutoriel, Intitulé "JQuery : Créez votre propre Plugin."
Pouvez-vous me donner des conseilles?
IE : je suis encore à la recherche de rédacteurs, administrateurs, modérateurs pour le projet.
Merci,
[b]Début de l'extrais:[/b]
[b]Les Plugins JQuery[/b]
Les Plugins nous permettent d’étendre les fonctionnalités de la bibliothèque JQuery, il existe bon nombre de Plugins qui fournissent des options pour pratiquement tout ce dont vous pourriez avoir besoin dans votre code JavaScript. Le codage d’un Plugin peut être simple en se résument à une fonction JavaScript ou bien assez complexe en offrant des fonctionnalités avancées, en fait tout dépend du besoin du projet en question.
Objectifs
Dans ce tutoriel, nous allons codé un Plugin JQuery simple mais hautement configurable qui ajoute un effet de survole aux images qui composent un élément choisit. Notre Plugin utilise un masque composé d’une icône et d’une couleur d’arrière-plan, ces deux éléments serons paramétrables pour ajouter un niveau de flexibilité a notre Plugin.
[b]Squelette de notre Plugin[/b]
Pour notre Plugin nous allons utiliser le squelette suivant :
[javascript];(function( $, window, document, undefined ){
// constructeur du Plugin
var Plugin = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
// Utilisation des HTML5 data attributes
// Ainsi notre Plugin pourra extraire les paramètres a partir de ces attributs
// Par exemple :
// <div data-plugin-options='{"option":"valeur"}'></div>
this.metadata = this.$elem.data( "plugin-options" );
};
Plugin.prototype = {
defaults: {
option: "valeur!"
},
init: function() {
// Surcharge des valeurs par défaut par ceux passé en paramétre!
this.config = $.extend({}, this.defaults, this.options, this.metadata);
// Utilisation:
// $('#elem').plugin({ option: 'Valeur!'});
// ou
// var p = new Plugin(document.getElementById('elem'),
// { option: 'Valeur!'}).init()
// oubien, définir manuellement les valeur par defaut :
// Plugin.defaults.option = 'valeur!'
this.initialise();
return this;
},
initialise: function() {
// ie : afficher la valeur de l'option par defaut
// console.log(this.config.option);
}
};
Plugin.defaults = Plugin.prototype.defaults;
$.fn.plugin = function(options) {
return this.each(function() {
new Plugin(this, options).init();
});
};
})( jQuery, window , document );
[/javascript]
Ce modèle de Plugin fait partie d’une collection de squelettes offert gratuitement par « Zeno Rocha » que vous pouvez la télécharger gratuitement ici : https://github.com/jquery-boilerplate/jquery-patterns
Cette collection offre des squelettes adaptés a plusieurs situations d’utilisation et de codages de Plugin Jquery. Le code précédent est le modèle adapté au codage de Plugins qui offrent une flexibilité maximale de paramétrage que vous pouvez trouver dans le package sous le nom de « jquery.highly-configurable.plugin.boilerplate.js »
Le code précédent est suffisamment commenté pour vous permettre de comprendre sa structure mais, si vous avez des difficultés à assimiler n’importe quel bout de code veuillez ajouter un commentaire pour pouvoir vous répondre.
[b]Le Plugin[/b]
Il est temps de commencer le codage de notre plugin
Pour commencer nous allons nommer notre Plugin « surveff » pour cela il faut renommer la variable « Plugin » et/ou « plugin » en « Surveff » dans le fichier « surveff.js » , notez bien que vous pouviez choisir le nom que vous voulez pour le vôtre, mais il faut choisir toujours un nom en relation avec le fonctionnement du Plugin.
Maintenant il faut avoir un fichier HTML (index.html), un fichier CSS (style.css) et notre fichier JavaScript (surveff.js) donc notre structure fichier ressemblera à :
[quote]image ici[/quote]
Dans le <body> de notre fichier HTML, ajoutez le code suivant :
[html]...
<div>
<div>
<span></span>
<img src="" />
</div>
</div>
...[/html]
Cette structure est simple, nous avons un conteneur pour nos images:
[html]...
<div></div>
...[/html]
Ce conteneur englobe toutes nos images et c’est lui que notre Plugin affectera, bien évidemment c’est le choix du tutoriel mais, vous pouvez étendre la zone d’activité du Plugin à la totalité du document, on verra ça plus loin.
Puis nous avons un autre conteneur:
[html]...
<div></div>
...[/html]
Qui regroupe un élément:
[html]...
<span></span>
...[/html]
Qui sera le masque a appliqué sur l’image, et puis l’image en question:
[html]...
<img src=" " />
...[/html]
Maintenant, nous allons avoir besoin de trois images:
Une qui sera notre image principale sur laquelle notre Plugin va ajouter l’effet de survole.
Une deuxième qui sera l’image au centré dans le masque.
Une troisième qui va nous permettre de tester la possibilité de changer l’image au centre du masque via les paramètres.
Dans notre exemple, nous allons utiliser ces deux images comme image principale pour tester si notre plugin adapte le masque sur des images de dimensions différentes:
[b]Fin de l'extrais:[/b]
