Creating a plugin for jQuery

Learn how to create a plug-in for jQuery from scratch - the basics, options, compatibility and examples.

The Basics
A plugin is written as a method or function.

Creating a jQuery function

Syntax

The function must return this.each (..) to maintain the ability to "chaining" - so that the function can be used with one or several objects jQuery.

jQuery.fn.myFunction = function () { 
this.each return (function () { 
/ / Element-specific code here 
}); 
}; 

Example

jQuery.fn.makeTextRed = function () { 
this.each return (function () { 
$ (This). Css ('color', 'red'); 
}); 
}; 
/ / Example usage 

  $ ('# My-div'). MakeTextRed () / / make text in "my-div" red 

  $ ('P'). MakeTextRed () / / make all red Paragraphs 

Creating a jQuery method

Syntax

jQuery.myMethod = function () { 
/ / Code here 
}; 
Example
jQuery.sayHelloWorld = function () { 

  alert ('Hello World'); 

  }; 
/ / Example usage 

  $. SayHelloWorld () / / alerts "Hello World" 

  Options

Let your plugin more flexible and user friendly as possible, using options. The method $. Extend () takes two or more objects as arguments and combines their contents within the first object.

Example
A function that sets the text color (red by default).

jQuery.fn.makeTextColored = function (settings) { 
var config = { 
'Color': 'red' 
}; 
if (settings) {$. extend (config, settings);} 
this.each return (function () { 

  $ (This). Css ('color', config.color); 

  }); 

  }; 

Now we can choose to use this function passing the parameter settings or not.

$ ('# My-div'). MakeTextColored () / / make red text (default) 
$ ('# My-div'). MakeTextColored ('blue') / / make text blue 

Compatibility

Because the variable $ can be used by other plugins, use a technique "disguised" to make your plugin compatible future.

(Function ($) { 
$. Fn.myFunction = function () { 
this.each return (function () { 
/ / Element-specific code here 
}); 
}; 
}) (JQuery); 

We went to the jQuery function, and we can now use jQuery for any outfit you want. So, instead of the $, you could use any valid JavaScript variable name.

A checklist of the jQuery plugin

• This is a list of important points to remember when developing a jQuery plugin ( the jQuery.com ).


• Name your file jquery. [Insert the plugin name]. Js, eg. jquery.debug.js.


• All new methods are attached to the object jQuery.fn object, and all functions to the jQuery object.


• For internal methods, this is a reference to the current jQuery object.


• Any methods or functions that you attach must have a semicolon (;) at the end - otherwise the code will break when compressed.


• Your method must return the jQuery object, unless it was explicitly noted otherwise.


• Use this.each to iterate over the current set of matching elements.


• Always attach the plugin to jQuery instead of $, so that users can use a custom outfit via noConflict ().

Templates jQuery plugin

These are good code templates to begin developing a jQuery plugin.

Template Function

(Function ($) { 
$. Fn.myPlugin = function (settings) { 
var config = { 
'Foo': 'bar' 
}; 
if (settings) {$. extend (config, settings);} 
this.each return (function () { 

  / / Element-specific code here 

  }); 

  }; 

  }) (JQuery); 

Template Method

(Function ($) { 
$. MyPlugin = function (settings) { 
var config = { 
'Foo': 'bar' 
}; 
if (settings) {$. extend (config, settings);} 
/ / Code here 
return this; 

  }; 

  }) (JQuery); 

Example: jQuery Slideshow Plugin

I decided to use very simple examples so far that you might be familiar. The following example is a little more complex and can help you find your inspiration.

He uses the setInterval () together with the effects fadeOut () and fadeIn () jQuery to generate the cycle of any images within a HTML element.

Configuration

HTML

<div id="slideshow"> 
<img src="img/sample-image-1.png" alt="" /> 
<img src="img/sample-image-2.png" alt="" /> 
<img src="img/sample-image-3.png" alt="" /> 
<img src="img/sample-image-4.png" alt="" /> 
</ Div> 

CSS

# Slideshow img { 
display: none; 
position: absolute; 
} 

JavaScript

(Function ($) { 
$. SimpleSlideShow = function (selector, settings) { 
/ / Settings 
var config = { 
'Delay': 2000, 
'FadeSpeed': 500 
}; 
if (settings) {$. extend (config, settings);} 
/ / Variables 

  var obj = $ (selector); 

  var img = obj.children ('img'); 

  var count = img.length; 

  var i = 0; 
/ / Show first image 

  img.eq (0). show (); 
/ / Run slideshow 

  setInterval (function () { 

  img.eq (i). fadeOut (config.fadeSpeed); 

  i = (i +1 == count)?  0: i +1; 

  img.eq (i). fadeIn (config.fadeSpeed); 

  }, Config.delay); 
return this; 

  }; 

  }) (JQuery); 

Use

To activate the slideshow div # slideshow, we simply call it using the following JavaScript code:

<script type="text/javascript"> 
$. SimpleSlideShow ('# slideshow'); 
</ Script> 

How do we allow the configuration to change the behavior of the slideshow, we could leave 5 seconds between the images and set the duration of the "fade" for 200 ms using:

<script type="text/javascript"> 
$. SimpleSlideShow ('# slideshow', {'delay': 5000, 'fadeSpeed': 200}); 
</ Script> 

Demo | Download