¿Cómo crear plugin jQuery simple?

Este complemento de prueba, se supone que funciona así: cuando se hace clic en un elemento, se mueve hacia abajo. Simple como eso.

jQuery.fn.moveDown = function(howMuch){ $(this).css("border", "1px solid black"); $(this).click(function(){ $(this).css("position", "relative"); $(this).animate({top: '+='+howMuch}); }); } 

El problema es que cuando se hace clic en un elemento, no solo mueve el elemento pulsado sino también TODOS los otros elementos a los que se aplicó el complemento.

¿Cuál es la solución para esto?

Para la creación de plugins intente de esta manera, mucho más sólido:

Edición: Aquí está funcionando el ejemplo de jsFiddle.


ENCHUFAR:

 (function($){ $.fn.extend({ YourPluginName: function(options) { var defaults = { howMuch:'600', animation: '',//users can set/change these values speed: 444, etc: '' } }; options = $.extend(defaults, options); return this.each(function() { var $this = $(this); var button = $('a', $this);// this represents all the 'a' selectors; // inside user's plugin definition. button.click(function() { $this.animate({'top':options.howMuch});//calls options howMuch value }); }); })(jQuery); 

DOCUMENTO DE USUARIO:

 $(function() { $('#plugin').YourPluginName({ howMuch:'1000' //you can give chance users to set their options for plugins }); }); 
1 2 3

Aquí quiero sugerir pasos para crear un complemento simple con argumentos.

JS

 (function($) { $.fn.myFirstPlugin = function( options ) { // Default params var params = $.extend({ text : 'Default Title', fontsize : 10, }, options); return $(this).text(params.text); } }(jQuery)); 

Aquí, hemos agregado un objeto predeterminado llamado params y hemos establecido valores predeterminados de opciones usando la función de extend . Por lo tanto, si pasamos un argumento en blanco, se establecerán los valores predeterminados, de lo contrario se establecerá.

HTML

 $('.cls-title').myFirstPlugin({ text : 'Argument Title' }); 

Leer más: Cómo crear el complemento JQuery

Respuesta original Aquí quiero sugerir pasos para crear un complemento simple con argumentos

    Intereting Posts