Discussion :

[Pelote2012]

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

[Darkaurora]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Pelote2012]

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/

[Darkaurora]

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.

[Pelote2012]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)[0].style.background

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).attr("style")

me retourne background:Blue et pas Blue...

Et suis-je obligé de faire

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pour appeler la fonction getInfo dans Settings?

[Darkaurora]

Code javascrit :

Sélectionner tout - Visualiser dans une fenêtre à part

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

c'est la même chose

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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