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
