Plugin JQuery : créer un setter?

Version imprimable

Bonjour à tous.

J'ai créé un plugin JQuery, voici le code réduit au minimum :

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
27
 
(function($) {
    $.fn.myPlugin = function(param, value) {
        //On récupère les paramètres.
        var params = {
            click : false            
        }
        if ($.isPlainObject(param)) {
            params = $.extend(params, param);
        } else if(param == "click" && typeof value == 'function'){
            params.click = value;
        }
 
        //On parcourt les noeuds.
        this.each(function() {
            //Action du click :
            $(this).click(function() {
                if (params.click && typeof(params.click) == "function" ) {
                    params.click.call();
                }
            });
        });
 
        //Chaînage JQuery.
        return this;
    };
})(jQuery);

Et un exemple de la manière dont je souhaite l'utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function() {
    $("a").myPlugin({
        click:function() {
            alert("!");
        }
    });
    $("a.test").myPlugin("click", function() {
        alert("test");
    });
});

Mon problème est que je n'arrive pas à modifier mon paramètre une fois que l'objet a été instancié : dans l'exemple ci-dessus, cliquer sur "a.test" m'affichera "!" et non "test".

Il y a un truc que je n'ai pas compris, manifestement! Si quelqu’un peut me mettre sur la voie, ce serait super cool.
J'ai pas trouvé grand chose sur le sujet sur le net.

Merci d'avance.

23/03/2011, 11h24
Bovino
Ben regarde juste comment tu appelles tes deux exemples...
Code:

1 2 3 $("a.test").myPlugin("click", function() { alert("test"); });
dans ce cas, que va renvoyer selon toi le test

Code:

if ($.isPlainObject(param))

si param vaut "click" ?
23/03/2011, 17h12
Soobook
Euhhhhhhh... je me suis trompé :aie: (je l'ai édité pour corriger). Dans mon plugin non allégé, j'ai :
Code:

1 2 3 4 5 //... else if(param == "click" && typeof value == 'function'){ params.click = value; }
Dans mon exemple, param vaut "click", donc c'est une chaine.

Si je fais :
Code:

1 2 alert($.isPlainObject("click"));
J'obtiens "false", il devrait donc assigner "value" à "params.click", non???

J'comprend plus...
24/03/2011, 03h07
nadox

Bonjour,

En testant l'exemple, j'ai deux alert sur le lien 'a.test'.
Celui avec le "!" et celui avec le "test"...

Rien d'étonnant, puisque les évènements sont surement attachés "proprement".

En effet.
J'ai l'impression que je me suis un emmêlé les pinceaux tout seul. :oops:

Nadox, que veux-tu dire par "attachés proprement"?

Du coup, j'utilise 'unbind' juste avant de créer l'évènement click et j'obtiens l'effet que je souhaite :

Code:

1
2
3
4
5
6
7
8
9
 
this.each(function() {
    //Action du click :
    $(this).unbind('click').click(function() {
        if (params.click && typeof(params.click) == "function" ) {
            params.click.call();
        }
    });
});

Juste pour être sûr, est-ce une bonne manière de procéder? Et après je met le Résolu.

-------------------------------------------------------------------------

Après plus de recherche, il me semble bien que c'est ce qu'il faut faire (cf. ce sujet).

Du coup voici le code final :

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
27
28
29
 
(function($) {
    $.fn.myPlugin = function(param, value) {
        //On récupère les paramètres.
        var params = {
            click : false            
        }
        if ($.isPlainObject(param)) {
            params = $.extend(params, param);
        } else if(param == "click"){
            //J'ai retiré "&& typeof value == 'function'" => si mon paramètre n'est 
            //pas une fonction, je supprime la fonction affectée au clic.
            params.click = value;
        }
 
        //On parcourt les noeuds.
        this.each(function() {
            //Action du click :
            $(this).unbind("click.mon_plugin").bind("click.mon_plugin", function() {
                if (params.click && typeof(params.click) == "function" ) {
                    params.click.call();
                }
            });
        });
 
        //Chaînage JQuery.
        return this;
    };
})(jQuery);

Merci à tous pour vos remarques :ccool:.
J'en suis moins bête, donc plus intelligent!!! :mouarf:

24/03/2011, 09h04
SpaceFrog

Voilà ! il fallait juste le traiter à l'irlandaise ...

A l'irlandaise? Un truc du genre :

Code:

1
2
3
4
5
6
7
8
 
$(this).unbind("drink.water").bind("drink.whisky", function() {
    if($(this).happy()){
        $(this).removeKilt();
    }else{
        $(this).kickInTheTeeth(".english_people");
    }
});

:mouarf:

24/03/2011, 10h02
SpaceFrog

ben non c'est pas un setter Irlandais que tu veux ?
http://static.wamiz.fr/images/animal...8ee8896388.jpg
24/03/2011, 10h09
SpaceFrog
hormis pour la dernière ligne ton code comporte quelques erreurs de syntaxes et d'ethique ..
Code:

1 2 $(this).unbind("drink.water").bind("drink.whisky", function() {
n'est pas correct
c'est drink.whiskey ... l'autre version étant écossaise...

de même pour

Code:

$(this).removeKilt();

le kilt n'est pas interprété correctement par la version irlandaise, c'est une méthode de la version écossaise
24/03/2011, 10h21
Soobook

J'avoue que je n'avais pas compris pour l'animal! Et que l'ajax d'outre manche est trop subtil pour mes grosses pattes de franchouillard. :frenchy:

En tout cas je m'incline devant ta science des celtes et autres barbares!!!
24/03/2011, 10h25
SpaceFrog

Le barbare te salue bien bas :aie:
24/03/2011, 10h40
Soobook

Quand je disais franchouillard... :oops:

Je m'auto-flagelle soixante-dix sept fois pour ce manque de tact! :arf: