How to create simple jQuery plugin?

Question

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?

It works. But not as it should. When an element is clicked, all the elements with the plugin applied to, move too. The only element supposed to move is the one that has been clicked. — user1091856, Jul 05 '12 at 06:49
Well, that's what I checked. I applied it to two elements using *$("#el1").moveDown("100px")* and *$("#el2").moveDown("100px")*. When I clicked an element, only that one moved. — McGarnagle, Jul 05 '12 at 06:50

Barlas Apaydin · Accepted Answer · 2012-08-24T22:35:08.060

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>

Nice plugin man, I think you're missing a closing `}` for the plugin, anyway really nice work. Here's a [fiddle](http://jsfiddle.net/ult_combo/5yKr6/6/) for testing. — Fabrício Matté, Jul 21 '12 at 01:22
Thanks mate, i saw closing mistake and edited that. it was on; `var defaults = {` — Barlas Apaydin, Aug 24 '12 at 22:38

score 0 · Answer 2 · edited May 23 '17 at 12:15

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

JS

(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

score 0 · Answer 3 · answered Jul 21 '20 at 16:37

0

If you have Node.js installed you can use create-jquery-plugin CLI utility. Just run

npx create-jquery-plugin

Or, you can clone the jquery-plugin-boilerplate to get started.

answered Jul 21 '20 at 16:37

Dipu Raj

1,784
4
29
37

How to create simple jQuery plugin?

3 Answers3

Linked