créer un plugin jquery avec de multiples fonctions

Question

ok suis un peu nouveau plugins j'ai utilisé beaucoup dans mes projets, j'ai aussi des plugins de base écrit qui fonctionnent sur des éléments avec des options:

(function($){ 
    $.fn.pulse = function(options) { 
     // Merge passed options with defaults 
     var opts = jQuery.extend({}, jQuery.fn.pulse.defaults, options); 
     return this.each(function() { 
      obj = $(this);    
      for(var i = 0;i<opts.pulses;i++) { 
       obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh); 
      }; 
      // Reset to normal 
      obj.fadeTo(opts.speed,1); 
     }); 
    }; 
    // Pulse plugin default options 
    jQuery.fn.pulse.defaults = { 
     speed: "slow", 
     pulses: 2, 
     fadeLow: 0.2, 
     fadeHigh: 1 
    }; 
})(jQuery); 

travaux ci-dessus ok, mais il est évident qu'il effectue une tâche, idéalement, je voudrais être en mesure d'effectuer des tâches multiples dans un plug-in pour que je puisse utiliser:

$('#div').myplugin.doThis(options); 
$('#div').myplugin.doThat(options; 

raison étant que j'ai un assez grand scénario qui ne différents appels ajax pour enregistrer les données et interroger des données à partir d'une base de données (en utilisant un fichier php externe) Je voudrais ntergrate toute cette fonctionnalité dans un plugin, mais je ne connais pas la meilleure structure à utiliser pour cela, j'ai regardé tant de tutoriels et ont fondamentalement frit mon cerveau, et je suis confus quant à la façon dont je devrais y arriver.

est juste une question de la création d'une nouvelle fonction comme:

$.fn.pluginname.dothis = function(options){ 
     return this.each(function() { 
      //execute code 
     }; 
    }; 

tous les pointeurs à ce sujet, ou un modèle pour me lancer serait vraiment utile.

toujours besoin d'aide !!!

---

problème suivant:

(function($){ 
// Can use $ without fear of conflicts 
    //var gmap3plugin = $.fn.gmap3plugin; 
    var obj = this; // "this" is the jQuery object 

    var methods = { 
     init : function(options){ 
      var lat = $.fn.gmap3plugin.defaults[lat]; 
      var lng = $.fn.gmap3plugin.defaults[lng]; 
      alert('init'+' lat:'+lat+' --- lng:'+lng); 
     }, 
     show : function() { }, 
     hide : function() { }, 
     update : function(content) { } 
    }; 



    $.fn.gmap3plugin = function(method){ 
     // Method calling logic 
     if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.tooltip'); 
     }; 
    }; 
    $.fn.gmap3plugin.defaults = { 
     mapdiv :'#mapdiv', 
     region : 'uk', 
     lat : 53.4807125, 
     lng : -2.2343765 
    }; 
})(jQuery); 

cela fonctionne et obtient la bonne fonction qui est passé, mais Comment accéder aux valeurs de la .fn.gmap3plugin.defaults $ le code mes déclarations de méthode d'initialisation indéfinis pour lat et lng

init : function(options){ 
    var lat = $.fn.gmap3plugin.defaults[lat]; 
    var lng = $.fn.gmap3plugin.defaults[lng]; 
    alert('init'+' lat:'+lat+' --- lng:'+lng); 
}, 

ou puis-je accéder à des données non thhe dans .fn.gmap3plugin.defaults de $ d'une fonction ???

Answer 1

Si vous regardez la conception de certains des autres plugins jQuery et jQuery UI, ce qu'ils font est qu'ils ont une seule fonction $('#div').myplugin({options}), et ils peuvent faire différentes fonctions en passant une chaîne au lieu d'un objet $('#div').myplugin('performdifferenttask') qui peut à son tour appeler une fonction d'assistance qui est cachée à l'utilisateur.

Pour un exemple regarder http://jqueryui.com/demos/progressbar/#methods

Voici un exemple qui nous l'espérons atténuer votre confusion:

(function($) { 
    $.fn.myplugin = function(options) { 
     if(options == 'function1') 
      function1(); 
     else if(options == 'function2') 
      function2(); 
     else { 
      //do default action 
     } 
    } 

    function function1() { 
     //do something 
    } 

    function function2() { 
     //do something else 
    } 
} 

en usage:

$.myplugin({option1: 4, option2: 6}); //does default behavior 
$.myplugin('function1'); //calls function1() 
$.myplugin('function2'); //calls function2() 

Answer 2

Après la réponse de Samuel, vous pouvez aussi utilisez ce qui suit pour éviter de manipuler deux fois les noms des fonctions:

(function($) { 
    $.fn.myplugin = function(options, param) { 
     if(typeof(this[options]) === 'function') { 
      this[options](param); 
     } 
     // do default action 

     this.function1 = function() { 
      //do something 
     } 

     this.function2 = function(param) { 
      //do something else (with a parameter) 
     } 
    }  
} 

L'ajout de la variable param vous permet d'appeler des fonctions comme ci-dessous:

$.myplugin(); // does default behaviour 
$.myplugin('function1'); // run function 1 
$.myplugin('function2'); // run function 2 
$.myplugin('function2',{ option1 : 4, option2 : 6 }); // run function 2 with a parameter object 

Voir http://jsfiddle.net/tonytlwu/ke41mccd/ pour une démonstration.