2010-11-04 6 views
7

bien am un poco nuevo a los plugins que he utilizado muchos de mis proyectos, también he escrito plugins básicos que solo trabajan en los elementos con opciones:crear un plugin de jQuery con múltiples funciones

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

lo anterior funciona bien, pero es obvio que realiza una tarea, a ser posible me gustaría ser capaz de realizar múltiples tareas dentro de un plug-in, así que podría utilizar:

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

razón es que tengo un guión bastante grande, que realiza varias llamadas Ajax para guardar los datos y consultar datos de una base de datos (usando un archivo php externo) Me gustaría Integre toda esta funcionalidad en un complemento, pero no sé cuál es la mejor estructura para usar, he visto tantos tutoriales y básicamente he estado frito en mi cerebro, y estoy confundido sobre cómo debo hacerlo.

es sólo una cuestión de crear una nueva función como:

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

cualquier punteros en este, o una plantilla que me refiero a que sería realmente útil.

¡siempre necesitando ayuda!


siguiente problema:

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

esto está funcionando y obtiene la función correcta que se pasa, pero ¿Cómo accedo a los valores en los $ .fn.gmap3plugin.defaults el código de mis devuelve el método init indefinido se lat y lng

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

o pueden no tener acceso a los datos en thhe $ .fn.gmap3plugin.defaults de una función ???

Respuesta

9

Si nos fijamos en el diseño de algunos de los otros plugins jQuery y jQuery UI, lo que hacen es que tienen una sola función $('#div').myplugin({options}), y luego se puede realizar diferentes funciones haciendo pasar una cadena en lugar de un objeto $('#div').myplugin('performdifferenttask') que puede a su vez llama a una función auxiliar que está oculta para el usuario.

Por ejemplo vistazo a http://jqueryui.com/demos/progressbar/#methods

Aquí hay un ejemplo que se espera aliviar su confusión:

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

entonces en uso:

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

hmm ok, creo que la arquitectura de plugins de jqueryui menciona algo sobre eso, tuve una lectura pero me dejó en un estado de confusión.¿Algún buen tutorial al que me puedas dirigir? –

+1

Mira la edición que hice – Samuel

+0

gracias samuel voy a intentarlo y ver dónde me encuentro, ciertamente parece que tiene más sentido que otros artículos que he leído. –

7

Tras la respuesta de Samuel, también puede utilice lo siguiente para evitar el doble manejo de los nombres de las funciones:

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

La adición de la variable param le permite llamar a funciones, como a continuación:

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

Ver http://jsfiddle.net/tonytlwu/ke41mccd/ para una demostración.

Cuestiones relacionadas