• Like
Jquery Plugin
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Jquery Plugin



Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. $(“jQuery”).Plugin()
  • 2. Will Discuss1. What is jQuery Plugin?2. Private Scope3. Using Good Template4. Understanding Template5. Plugin Syntax6. jQuery Prototype7. Adding Options(Single Argument)8. Object Literals(Multiple Arguments)9. Why this.each() ?10. Steps for Developing Better jQuery plugins
  • 3. 1. What is jQuery PluginGeneral definition : Fairly common functions outside of the jQuerylibrary.ORA Collection of javascript/jQuery function intended to achieve afeature for a given element in a private scope.
  • 4. 2. Private Scope ?(function($) {// Shell for your plugin code//Code Written here will not make conflict with //global Scopecode})(jQuery);
  • 5. 3. Use a Good Template/*!* jQuery plugin. What does it do*/(function($) {$.fn.PlugInName = function(opts) {// default configurationvar config = $.extend({}, {opt1: null}, opts);// main functionfunction DoSomething(e) {}
  • 6. Continued......// initialize every elementthis.each(function() {DoSomething($(this));});return this;};})(jQuery);
  • 7. 4. Understanding Template(function($) {// Shell for your plugin code})(jQuery);The safest (only!) way of doing this, is to create a private scopefor the jQuery function. This JavaScript trick ensures that yourplugin will work nicely, even on pages where a person is usingthe $ function for non-jQuery purposes:
  • 8. 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 isto 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 infuture projects or share it with the world!
  • 9. 6. What is this jQuery.prototype ?Prototype is a style of object-oriented programming in whichclasses are not present, and behavior reuse (known asinheritance in class-based languages) is performed via aprocess of cloning existing objects that serve as prototypes.This model can also be known as classless, prototype-oriented orinstance-based programming.function Test() { this.a = a;}Test.prototype.b = b;var test = new Test();test.a; // "a", own propertytest.b; // "b", inherited property
  • 10. 7. Adding OptionsjQuery plugins are an excellent way to produce reusable code, butto be truly useful, our plugins need to be applicable outside thecontext 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);
  • 11. 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
  • 12. 9. Why this.each(function()) in jQuery plugins?this.each(function() {DoSomething($(this));});When you filter elements with a selector ($(.myclass)), it canmatch more than only one element.With each, you iterate over all matched elements and your code isapplied to all of them.//Can Do return “this”return this.each(function() {DoSomething($(this));});
  • 13. Continued...Unless your plugin returns a value, the last line of your pluginfunction mustreturn this;this ensures method calls can be chained, e.g.$("selector").yourPlugin().anotherPlugin()....;Demo Time
  • 14. 10. Steps for Developing Better jQuery Plugins1.Make it Easy to Use– In most cases, your plugin should simply work without thedeveloper having to wade though documentation, setoptions or edit your plugin code.2. Use Suitable Naming and Version Control Numbers– There are a lot of jQuery plugins. If you’re considering thename “tab” for your tab-handling plugin, there’s a strongpossibility it’s been used already. That may not alwaysmatter but avoid using names which are ambiguous orlikely to clash.3.Use a Closure– (function($) {// code here can use $ to reference jQuery})(jQuery);
  • 15. Continued...●4.Set Default Parameters– $.fn.PlugIn = function(opts) {// default configurationvar config = $.extend(config, opts);}5.Don’t Break the Chain– Unless your plugin returns a value, the last line of yourplugin function must be:return this;6.Document Your Code– Add concise comments to the top of your plugin7.Test Your Plugin Thoroughly
  • 16. Questions