jQuery : plusieurs instances distinctes d'un même plugin

1 message   •   Page 1 sur 1
Mammouth du PHP | 19672 Messages

19 août 2010, 16:11

Salut,
je me suis heurté à un petit problème : pouvoir utiliser plusieurs instances de mon plugin jQuery dans une même page.
La méthode classique échoue parce qu'en réalité, ce n'est pas une instance du plugin qui est exécutée mais une instance de jQuery.
Donc si plusieurs éléments sont définis comme devant être gérés par ce plugin, chaque définition écrase les paramètres de la précédente.

Il fallait donc aborder le problème autrement en posant la question d'une autre manière.

Je n'ai pas besoin que ce code soit actif en permanence, mais seulement lorsque l'évènement se produit. Le code d'un plugin réagit habituellement à un évènement particulier sur un élément particulier. Par exemple au click sur un bouton, ou bien au survol d'une image.
Dans mon cas, c'était au focus sur un champ de formulaire pour obtenir une autocompletion, mais mon formulaire comporte 4 champs de ce type.
Pour chaque champ, les paramètres sont distincts.

Ma solution est donc passée par un gestionnaire d'évènement sur les différents éléments. Lorsque l'évènement se produit, alors seulement on initialise le plugin avec les bons paramètres.
Avec un peu de code, ce sera peut-être plus clair :
$(document).ready(function(){
    // Wich elements are affected by the plugin
    var ids = ['myDiv1','myDiv2','myDiv3'];
    // foe each one :
    for (v in ids) 
    {
        //define from an event :
        $('#'+ ids[v]).focus(function()
        {
            // depending wich id is active :
            var  aParams, idDiv = $(this).prop('id');
            // Choosing the right params
            switch(idDiv)
            {
                case 'myDiv1':
                    aParams = {'color': '#660000', 'background-color': '#0000ff'};
                    break;
                case 'myDiv2':
                    aParams = {'color': '#006600', 'background-color': '#ff00ff'};
                    break;
                case 'myDiv3':
                    aParams = {'color': '#000066', 'background-color': '#ff0000'};
                    break;
                default:
                    aParams = {'color': '#000000', 'background-color': '#ffffff'};
            };
  
            $(this).myPlugin(
            {
                colors: aParams
            });
        });
    }
});
Et voilà, ça fonctionne parfaitement, personne ne se marche sur les pieds.
À vous d'adapter à vos besoins selon l'évènement approprié sur les éléments correspondant :)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

1 message   •   Page 1 sur 1