Plugin JQuery : créer un setter? [Résolu]

[Soobook]

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.

[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" ?

[Soobook]

Euhhhhhhh... je me suis trompé (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...

[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".

[Soobook]

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

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 .
J'en suis moins bête, donc plus intelligent!!!

[SpaceFrog]

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

[Soobook]

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

[SpaceFrog]

ben non c'est pas un setter Irlandais que tu veux ?

[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

[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.

En tout cas je m'incline devant ta science des celtes et autres barbares!!!

[SpaceFrog]

Le barbare te salue bien bas

[Soobook]

Quand je disais franchouillard...

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