How to create simple jQuery plugin?

问题

This test plugin, is supposed to work like this: When an element is clicked, it moves down. Simple as that.

jQuery.fn.moveDown = function(howMuch){
    $(this).css("border", "1px solid black");
    $(this).click(function(){

        $(this).css("position", "relative");
        $(this).animate({top: '+='+howMuch});
    }); 
}

The problem is, when an element is clicked, it not only moves the clicked element but also ALL the other elements which the plugin was applied to.

What is the solution for this?

回答1:

For plugin authoring try this way, much more solid:

Edit: Here is working jsFiddle example.

PLUGIN:

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

USER'S DOCUMENT:

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

<div id="plugin">
  <a>1</a>
  <a>2</a>
  <a>3</a>
</div>

回答2:

Here i want to suggest steps to create simple plugin with arguments.

(function($) {
    $.fn.myFirstPlugin = function( options ) {

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

    }
}(jQuery));

Here, we have added default object called params and set default values of options using extend function. Hence, If we pass blank argument then it will set default values instead otherwise it will set.

HTML

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

Read more: How to Create JQuery plugin

Original answer Here i want to suggest steps to create simple plugin with arguments

来源：https://stackoverflow.com/questions/11338967/how-to-create-simple-jquery-plugin

标签

javascript

jquery

jquery-plugins

plugins

extend