IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Structure d'un plugin [Plugin]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre chevronné
    Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2008
    Messages
    504
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2008
    Messages : 504
    Par défaut Structure d'un plugin
    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.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre chevronné
    Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2008
    Messages
    504
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2008
    Messages : 504
    Par défaut
    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.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Plugin] Générer un projet structuré
    Par fzh2014 dans le forum Eclipse Platform
    Réponses: 1
    Dernier message: 31/07/2012, 10h15
  2. Structure du corps pour un plugin
    Par Jihane22 dans le forum Eclipse Platform
    Réponses: 4
    Dernier message: 08/07/2010, 17h09
  3. jspc-maven-plugin STRUCTURE DE PROJET
    Par alexandragonzalez dans le forum Maven
    Réponses: 0
    Dernier message: 11/06/2009, 17h01
  4. Structure plugin sans plugin
    Par GoustiFruit dans le forum Langage
    Réponses: 7
    Dernier message: 20/08/2008, 15h46
  5. Structure d'une appli et plugin
    Par Le prophete dans le forum Langages de programmation
    Réponses: 2
    Dernier message: 08/11/2004, 15h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo