Création plugin avec plusieurs méthodes

Version imprimable

Bonjour,

j'aimerais avoir une plugin afin d'attacher plusieurs méthodes au sélecteurs.
Mais ça ne marche pas l méthode zigzag n'est pas trouvée.. Pour jq c'est JqUi.. Merci d'avance pour votre aide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
(function ($) {
 
    $.fn.lam2mobile = function (selector) {
        this.each(function () {
            var $this = $(this);
            this.zigzag = function () {
                console.log('public zigzag called!');
            }
        });
        return this;
 
    };
 
 
})(jq)

Bonsoir

On peut ajouter plusieurs méthodes au prototype de jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
( function( $ ){
	 $.extend( $.fn, {
	 	"pluginUn" : function( options ){
	           return this.each( function (i, item){
	               console.log( i, item, "pluginUn" );
	           });
	 	},
	 	"pluginDeux" : function( options ){
	           return this.each( function (i, item){
	               console.log( i, item, "pluginDeux" );
	           });
	 	},
	 	"pluginTrois" : function( options ){
	           return this.each( function (i, item){
	               console.log( i, item, "pluginTrois" );
	           });
	 	}
     });
})(jQuery);
 
$( function(){
	$( selector )
		.pluginUn()
		.pluginDeux()
		.pluginTrois();
});

Bonjour fabou3377,

Si je comprends bien ce que tu souhaites faire, ton plugin fonctionne en fait déjà très bien.
Citation:
Envoyé par fabou3377
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (function ($) { $.fn.lam2mobile = function (selector) { this.each(function () { var $this = $(this); this.zigzag = function () { console.log('public zigzag called!'); } }); return this; }; })(jq)
Si maintenant tu appels le code suivant:
Code:

1 2 3 4 5 6 7 8 <div id="test">kikoo</div> <script> (function($){ $('#test').lam2mobile(); $('#test').get(0).zigzag(); })(jq); </script>
Le message "public zigzag called!" va bien s'afficher dans la console. Par contre, code suivant ne fonctionnera pas:
Code:

1 2 3 4 5 6 7 <script> (function($){ $('#test').lam2mobile(); $('#test').zigzag(); // Erreur car la fonction jQuery.fn.zigzag n'existe pas })(jq); </script>
Car à la différence de librairies comme Prototype (ou en JavaScript natif), l'objet jQuery ne retourne pas directement le dom HTML concerné, mais un objet jQuery qui contient une liste de DOM.
Donc dans ton plugin, le 'this' de la ligne 'this.zigzag = function () {' correspond bien au DOM, par contre $('#test') correspond à un objet jQuery.
C'est pourquoi pour appeler ta fonction zigzag il faut d'abord récupérer le DOM via les fonctions $('#test').get(0) ou $('#test')[0] (c'est un équivalent).

Mais en jQuery, il est très déconseillé d'ajouter des méthodes directement aux DOM (entre autres pour des raisons de mémoire/performance), c'est pourquoi il vaut mieux utiliser la méthode que présente danielhagnoul afin de créer un plugin par méthode que tu souhaites ajouter. Du coup elles seront accessibles en effet pour tous les DOMs, mais ce n'est pas dérangeant car tu les utilises normalement uniquement sur les DOMs qui t’intéressent.

@++,

Marc