Structure d'un plugin

Version imprimable

Bonjour,

Voilà, j'aimerai soumettre mon début de création de plugin à la communauté. Si on trouve à foison des tutos sur la création de plugin jquery, tous proposent des options différentes et très peu vont dans les fonctions un peu avancées et j'ai encore un peu de mal notamment a cause du chaînage.
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <script type="text/javascript"> $( document ).ready(function() { jQuery.fn.Creneau = function(options){ var defaults = { start_date: false, end_date: false, name: "", datas: {} }; $(this).each(function(){ var params = $.extend({}, defaults, options); var myself = $(this); myself .draw = function() { // aura pour but de redessiner l'element HTML return myself; }; myself.start = function(d) { // fonction qui permet d'affecter dynamiquement une nouvelle valeur a start_date if(d.length) { if(d instanceof Date) params.start_date = d; myself.draw(); return myself; } else return params.start_date; }; // Si mes propriétés start_date et end_date sont indefinies, j'essaye de les initialiser a partir des data de la balise HTML if(!(params.start_date instanceof Date)) params.start_date = new Date(myself.data("start_date")); if(!(params.end_date instanceof Date)) params.end_date = new Date(myself.data("end_date")); if(params.name.length < 1) params.name = myself.data("name"); myself.on("click", function(){ console.log(params); }); return $(this); // faut-il chainner la ? }); // fin each return this; // ou peut être la ? } $("#truc").Creneau({start_date:new Date(2016, 1, 1, 0, 0, 0),end_date:new Date(2017, 1, 1),name:"salut"}); var x = $("#truc2").Creneau().start(new Date(2014, 1, 1, 12, 20, 15)); console.log(x); }); </script> <div id="truc" style="border:1px solid #090;">TEST</div> <div id="truc2" style="border:1px solid #F00;" data-start_date="2016-03-21T12:00:00" data-end_date="2016-03-21T14:00:00" >TEST 2</div>
Bon, comme ça, ça ne marche pas...

Citation:

TypeError: $(...).Creneau(...).start is not a function

~~Le problème reste le même si je remonte start() avant le each()...~~ avec le this, ça marche si la méthodes est au dessus du each... mais c'est dans le each que j'en ai besoin !

Donc comment créer des méthodes pour mon plugin ?

Par ailleurs, avez vous d'autres remarques sur bonne façon de faire un plugin et que je ne respecterai pas du tout ?

En vous remerciant.

Edit : 1er bourde trouver, il faut précisier le this pour définir une méthode, et non pas utiliser var.

21/03/2016, 23h00
danielhagnoul
- FAQ jQuery
- Comment puis-je écrire un plugin ? Voir : Plugin monotâche (je constate que le second o a été oublié :aie: )

Qu'est ce que tu appels un plugin monotache ? c'est un plugin qui n'a qu'un constructeur (moi, j'ai besoin de beaucoup de méthodes) ?

J'avais complètement ré-écrit mon code entre ma question et ta réponses, et j'étais arrivé à quelque chose de curieusement proche de la solution proposée... Mais je bloque encore sur des éléments qui ne sont pas abordés dans ta solution, notamment où (et comment) définir les méthodes du plugin ? Dans le each() ?

Concernant le tuto multitache, les ZIP sont liens morts, et je dois dire que ça ne m'aide pas beaucoup. C'est bien à un truc du style dvjhStorage que je voudrais arriver.

Le code ré-écrit entre hier et ta réponse :
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 (function(window, $){ var Creneau = function(options){ this.options = options; }; Creneau.prototype.defaults = { start_date: false, end_date: false, name: "", datas: {} }; Creneau.prototype.init = function() { $.extend(this.options, this.defaults); }; Creneau.prototype.start = function(d) { /* ... */ }; jQuery.fn.Creneau = function(options) { this.each(function(i, item){ return new Creneau(options).init(); }); }; })(window, jQuery);
mais a ce stade,

Code:

$("div.zzz").Creneau().start();

provoque encore une erreur car undefined.

Je ne sais pas ce qu'il est advenu du ZIP lié au tutoriel, plus grave je n'ai plus une copie.

Pour un plugin basé sur un objet, je vous conseille de commencer avec une structure beaucoup plus simple que celle du tutoriel.

Comme je ne sais pas ce que vous souhaitez réaliser, commençons avec un exemple :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    ( function( $, W ){ 
      var
        pluginName = "Creneau",
        defaults = {
          'start_date' : false,
          'end_date' : false,
          'name' : '',
          'datas' : {}
        };
 
      function Plugin( element, options ){
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
      }
 
      Plugin.prototype.init = function(){
        var jObj = $( this.element );
 
        jObj
          .css({
            'position' : 'relative',
            'width' : '300px',
            'height' : '300px',
            'border' : '1px solid green',
            'color' : this.options.datas.color,
            'text' : jObj.text() + ' ' + this.options.name,
          })
          .on({
            'click' : function( ev ){
              console.log( ev.type );
            },
            'mouseenter' : function( ev ){
              jObj.stop( false, true ).animate( { 'left' : '+=100px' }, 2000 );
            },
            'mouseleave' : function( ev ){
              jObj.stop( false, true ).animate( { 'left' : '-=100px' }, 2000 );
            }
          });
      };
 
      $.fn[pluginName] = function( options ){
        return this.each( function(){
          if ( !$.data( this, "plugin_" + pluginName ) ){
            $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
          }
        });
      }
    })( jQuery, window );
 
    $( function(){
 
      $( '#myDiv' ).Creneau({
        'name' : 'Le Creneau',
        'datas' : {
          'color' : 'red'
        }
      });
 
    });
  </script>
</head>
<body>
 
  <div id="myDiv">
    <p>Hello</p>
  </div>
 
</body>
</html>