Jquery Plugin


Published on

Published in: Technology
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Jquery Plugin

  1. 1. $(“jQuery”).Plugin()
  2. 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. 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. 4. 2. Private Scope ?(function($) {// Shell for your plugin code//Code Written here will not make conflict with //global Scopecode})(jQuery);
  5. 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. 6. Continued......// initialize every elementthis.each(function() {DoSomething($(this));});return this;};})(jQuery);
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Questions