1. $(“jQuery”).Plugin()

3. 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

4. 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.

5. 2. Private Scope ?
(function($) {
// Shell for your plugin code
//Code Written here will not make conflict with //global Scope
code
})(jQuery);

6. 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) {}

7. Continued...
...
// initialize every element
this.each(function() {
DoSomething($(this));
});
return this;
};
})(jQuery);

8. 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:

9. 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!

10. 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

11. 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');

12. 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

13. 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));
});

14. 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

15. 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);

16. 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

17. Questions