tworzenia jQuery plugin z wieloma funkcjami

Question

ok am trochę nowych do wtyczek Użyłem wielu z moich projektów, mam również napisane podstawowych wtyczek, które po prostu działają na elementach z opcji:

(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); 

powyższe działa ok, ale oczywiście wykonuje to jedno zadanie, idealnie chciałbym być w stanie wykonywać wiele zadań w ramach plugin, więc przydałby:

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

powodem jest mam dość duży skrypt, który ma różne ajax rozmowy, aby zapisać dane i dane zapytania z bazy danych (przy użyciu zewnętrznego pliku php) Chciałbym ntergrate wszystkie te funkcje do wtyczki, ale nie znam najlepszej struktury do tego celu, ive spojrzał na tylu tutoriali i zasadniczo smażył mój mózg, i jestem zdezorientowany, jak powinienem to zrobić.

jest to tylko kwestia tworzenia nowej funkcji, takich jak:

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

żadnych wskazówek dotyczących tego, czy szablon do zaczynaj mi byłoby bardzo pomocne.

na zawsze potrzebuję pomocy !!!

---

Następny problem:

(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); 

to działa i dostaje właściwą funkcję, która jest przekazywana, ale w jaki sposób mogę uzyskać dostęp do wartości w $ .fn.gmap3plugin.defaults kod w moje metody init zwraca niezdefiniowana dla łac i LNG

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

lub nie mogę uzyskać dostępu do danych THHE w $ .fn.gmap3plugin.defaults z funkcji ???

Answer 1

Jeśli spojrzeć na projektowaniu niektórych innych wtyczek jQuery i jQuery UI, co robią, to mają jedną funkcję $('#div').myplugin({options}), a następnie mogą robić różne funkcje przekazując ciąg zamiast obiektu $('#div').myplugin('performdifferenttask') które mogą z kolei wywołuje funkcję pomocnika, która jest ukryta przed użytkownikiem.

Na przykład spojrzeć na http://jqueryui.com/demos/progressbar/#methods

Oto przykład, które miejmy nadzieję łagodzić swoje pomyłki:

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

Następnie w użytku:

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

Answer 2

następującą odpowiedź Samuela, można również Wykonaj następujące czynności, aby uniknąć podwójnego posługiwania się nazwami funkcji:

(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) 
     } 
    }  
} 

Dodanie zmiennej param pozwala na wywołanie funkcji jak poniżej:

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

Zobacz http://jsfiddle.net/tonytlwu/ke41mccd/ na demo.