Discussion :

[comode]

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 :

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

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.

[danielhagnoul]

• FAQ jQuery
• Comment puis-je écrire un plugin ? Voir : Plugin monotâche (je constate que le second o a été oublié )

[comode]

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 :

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

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

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

provoque encore une erreur car undefined.

[danielhagnoul]

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 :

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