Communiquer avec son composant

Bonjour,

J'ai créé un composant graphique jquery. Je souhaiterai maintenant l'interroger.
L'idée serait par une fonction javascript faire un appel à une fonction de mon composant.
J'ai fais un exemple simple http://jsfiddle.net/szy4gj6v/
Dans mon exemple, je voudrai que la fonction GetInfo me retourne 'blue'.

Pour arriver à ce genre de manipulation il te faudra passer par les classes et l'instanciation. Voici un pattern que j'utilise souvent pour écrire des plugins et qui est directement dérivé de bootstrap:

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 30 31 32 33 34 35 36 37 38 39 40

+function ($) { 'use strict';   var BK = function (element, options) { this.options = options; this.$element = $(element); this.n = this.$element.attr('id');   this.$element.css('background', this.options.bkg); }   BK.DEFAULTS = { bkg: 'yellow' }   BK.prototype.GetInfo = function () { return this.options.bkg; }   function Plugin(option) { return this.each(function () { var $this = $(this); var options = $.extend({}, BK.DEFAULTS, option, typeof option == 'object' && option);   $this.data('bk', new BK(this, options)); }); }   var old = $.fn.bk   $.fn.bk = Plugin $.fn.bk.Constructor = BK }(jQuery);   $('#div').bk({bkg: 'red'}); $('#div1').bk({bkg: 'blue'});   $('#btnGetSel').click(function () { alert($('#div1').data('bk').GetInfo()); });

---

Le principe est d'écrire une classe très classique en JS puis d'utiliser une fonction "plugin" qui va permettre d'encapsuler la classe en jQuery et d'initialiser le tout. Le principe reste simple, le tout est de stocker quelque part l'instanciation de ta classe, personnellement je le stock sur l'élément via data.

Bonjour

Merci pour ta réponse
Voici une autre réponse qu'on m'a donné sur un autre forum
http://jsfiddle.net/jakecigar/szy4gj6v/2/

C'est pratiquement pareil la seule différence réside dans l'instanciation que j'effectue et qui n'est pas présent dans le deuxième exemple. Il est possible que la solution que l'on t'a proposé peut avoir certaine contrainte sur une utilisation poussé en JS, toutefois et c'est la seule remarque que j'ai à faire sur pour l'exemple proposé: pour un plugin important la lecture, la maintenance et les risques de collisions peuvent également augmenter.

J'ai bien vu que les 2 solutions sont proches.
Mais ce n'est pas vraiment ce que je cherche.
Je veux accéder vraiment à ma div et l'inspecter pour trouver l'info et pas la mettre en data.
Je vais avoir dans cette div un tableau avec des cases à cocher et je voudrais me retourner un array des case cochées.

Code:

---

$(this)[0].style.background

---

retourne bien Blue mais je trouve pas top le [0]
et

Code:

---

$(this).attr("style")

---

me retourne background:Blue et pas Blue...

Et suis-je obligé de faire

Code:

---

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

---

pour appeler la fonction getInfo dans Settings?

Code:

---

1 2	$(this)[0].style.background this.style.background

---

c'est la même chose :)

Code:

---

1 2 3

$(this).attr("style") // Ok mais... $(this).css('background') // Pourquoi pas ça ?

---

Code:

---

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

---

Ok cette solution est chiante à écrire même si je l'adore :), mais pourquoi ne pas utilisé la mienne ?

Code:

---

$('#div1').data('bk').GetInfo()

---

Code:

---

this.style.background

---

me répond une erreur this.style n'existe pas et

Code:

---

$(this).css('background')

---

est vide...

Pour

Code:

---

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

---

est dans la définition du plugin, si je comprend l'idée, c'est d'enregistrer le settings dans le data de ma div? et de pourvoir y accéder après, même avec la fonction accessible de l'extérieur?

Au final, j'ai mis setting dans data
et j'utilise la boucle

Code:

---

1 2 3

$('#' + nameW + 'Datas tr td:first-child').each(function () { if ($(this).find('#chkSel').is(':checked')) { arr.push($(this).closest('tr').attr('id')); }; });

---

ou nameW est le nom de ma div et nameW+ datas = table créé dynamiquement

Citation:

---

Envoyé par Pelote2012

Code:

---

this.style.background

---

me répond une erreur this.style

---

Effectivement si "this" représente un objet jQuery. Cependant je t'assure que ceci fonctionne

Code:

---

1 2 3

var test = document.getElementById('div1'); console.log(test.style.background); console.log(test.style.backgroundColor);

---

Citation:

---

Envoyé par Pelote2012

n'existe pas et

Code:

---

$(this).css('background')

---

est vide...

---

Alors la propriété background n'est pas remplie

Citation:

---

Envoyé par Pelote2012

Pour

Code:

---

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

---

est dans la définition du plugin, si je comprend l'idée, c'est d'enregistrer le settings dans le data de ma div? et de pourvoir y accéder après, même avec la fonction accessible de l'extérieur?

---

C'est tout à fait ça, par contre pour ton dernier post je n'ai pas du tout compris ce que tu fais en fait :)

le this est effectivement déjà un élément jquery. Si tu regarde les posts précédents, tu verra les syntaxes qui me retournent des infos.
Mais c'est pas grave, car j'ai maintenant trouvé ce qui me manquais

Sinon dans mon dernier post, en fait je parcours la première colonne de ma table (là où il y a la case à cocher que je veux contrôler)
je regarde si elle est cocher. Si oui je mets l'ID de ma ligne dans un tableau
à la fin je m'envoi un tableau avec les id pour faire un traitement sur plusieurs ligne de mon tableau (suppression...)