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};ExamplejQuery.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).
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 ().
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 herereturn 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) {/ / Settingsvar 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>
