$(“jQuery”).Plugin()

Will Discuss

1. What is jQuery Plugin?

2. Private Scope

3. Using Good Template

4. Understanding Template

5. Plugin Syntax

6. jQuery Prototype

7. Adding Options(Single Argument)

8. Object Literals(Multiple Arguments)

9. Why this.each() ?

10. Steps for Developing Better jQuery plugins

1. What is jQuery Plugin

General definition : Fairly common functions outside of the jQuery library.

OR

A Collection of javascript/jQuery function intended to achieve a feature for a given element in a private scope.

2. Private Scope ?

(function($) {

// Shell for your plugin code

//Code Written here will not make conflict with //global Scope code

})(jQuery);

3. Use a Good Template

/*!

* jQuery plugin. What does it do

*/

(function($) {

$.fn.PlugInName = function(opts) {

// default configuration

var config = $.extend({}, {

opt1: null

}, opts);

// main function

function DoSomething(e) {}

Continued...

...

// initialize every element

this.each(function() {

DoSomething($(this));

});

return this;

};

})(jQuery);

4. Understanding Template

(function($) {

// Shell for your plugin code

})(jQuery);

The safest (only!) way of doing this, is to create a private scope for the jQuery function. This JavaScript trick ensures that your plugin will work nicely, even on pages where a person is using the $ function for non-jQuery purposes:

5. Plugin Syntax

$.fn.pluginname = function() {

// Plugin code

}

$.fn is a shortcut to the jQuery.prototype JavaScript property.

This code can go anywhere in your script, but standard practice is to put it in a separate JavaScript file named jquery.pluginname.js, and include it as you’d include any javascript file.

<script src="jquery.pluginname.js"></script>

Now that you have a stand-alone file, you can easily use it in future projects or share it with the world!

6. What is this jQuery.prototype ?

Prototype is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as classless, prototype-oriented or instance-based programming.

function Test() { this.a = 'a';}

Test.prototype.b = 'b';

var test = new Test();

test.a; // "a", own property

test.b; // "b", inherited property

7. Adding Options

jQuery plugins are an excellent way to produce reusable code, but to be truly useful, our plugins need to be applicable outside the context for which we created them: they need to be customizable.

$.fn.highlightOnce = function(color) {

⋮

$(this).css('background-color', color || '#fff47f')

};

//Default plugin call

$(“selector”).highlightOnce();

//Plugin call with param

$(“selector”).highlightOnce('#ccfadb');

8. Object literals Options

$.fn.highlightOnce = function(opt) {

var defaults = { color : '#fff47f', duration : 'fast' };

options = $.extend(defaults, opt);

$(this).css('background-color', options.color);

...

};

//Default plugin call

$(“selector”).highlightOnce(); //default plugin function executed

//Default plugin call with param

$(“selector”).highlightOnce({color: '#ccfadb',duration : 'slow' }); //user passed values executed

9. Why this.each(function()) in jQuery plugins?

this.each(function() {

DoSomething($(this));

});

When you filter elements with a selector ($('.myclass')), it can match more than only one element.

With each, you iterate over all matched elements and your code is applied to all of them.

//Can Do return “this”

return this.each(function() {

DoSomething($(this));

});

Continued...

Unless your plugin returns a value, the last line of your plugin function must

return this;

this ensures method calls can be chained, e.g.

$("selector").yourPlugin().anotherPlugin()....;

Demo Time

10. Steps for Developing Better jQuery Plugins

1.Make it Easy to Use

– In most cases, your plugin should simply work without the developer having to wade though documentation, set options or edit your plugin code.

2. Use Suitable Naming and Version Control Numbers

– There are a lot of jQuery plugins. If you’re considering the name “tab” for your tab-handling plugin, there’s a strong possibility it’s been used already. That may not always matter but avoid using names which are ambiguous or likely to clash.

3.Use a Closure

– (function($) {

// code here can use $ to reference jQuery

})(jQuery);

Continued...

● 4.Set Default Parameters

– $.fn.PlugIn = function(opts) {

// default configuration

var config = $.extend(config, opts);

}

5.Don’t Break the Chain

– Unless your plugin returns a value, the last line of your plugin function must be:

return this;

6.Document Your Code

– Add concise comments to the top of your plugin

7.Test Your Plugin Thoroughly

Questions