Jquery plugin development

It is nice tutorial step by step to develop a JQuery plugin.

1. JQuery Plugin Development Faruk Hossen

2. What is JQuery JQuery is a Javascript Library. The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities

3. jQuery is a javascript object. var jQuery = function( ) { //object properties go here. }; JQuery Object

4. ‘$’ is shorthand for jQuery When we call the $() function and pass a selector to it, we create a new object $( document ); $(“div.menu”); $(“div.menu”).click(function(){ $(this).find(“ul”).show(); } JQuery Object

5. Javascript prototype object is $.fn or jQuery.fn JQuery Prototype Object

6. All objects have a prototype property. The JavaScript prototype property also allows you to add new methods to an existing prototype. It is simply an object from which other objects can inherit properties What is prototype of an object in js

7. function person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } person.prototype.name = function() { return this.firstName + " " + this.lastName }; var myFather = new person("John", "Doe", 50, "blue"); console.log(myFather.name()); What is prototype of an object in js

8. function Person(name) { this.name = name; } Person.prototype.sayHello = function () { alert(this.name + " says hello"); }; var james = new Person("James"); james.sayHello(); // Alerts "James says hello" What is prototype of an object in js

9. jQuery.fn = jQuery.prototype. from jquery source code: jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // ... return this; } // jQuery API methods } What is $.fn

10. In object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object There are really two main contexts of 'this' in jQuery. ‘this’ first refers to a DOM element ‘this’ refers to a jQuery object. What is ‘this’

11. $( "p" ).click(function() { $( this ).slideUp();//is it wrong? this.slideUp() //is it wrong ? }); What is ‘this’ (continues…)

12. jQuery.fn.newTarget = function() { this.hide(); //will it show error? $(this).hide(); //will it show error? } $(‘p’).newTarget(); What is ‘this’ (continues…)

13. What is JQuery Plugin A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call jQuery () you're creating a new jQuery object, with all of jQuery's methods inherited.

14. Portability Time Why JQuery Plugin

15. Packaging a common function within a jQuery plugin will normally make it more portable. Doing so allows you to easily integrate the plugin into any number of projects within a short amount of time. Reusability, another buzz word, comes hand in hand with this. portability

16. It will save you (and your users) time. The time it takes to develop a robust plugin is clearly worth it when you consider what it enables. Time

17. jQuery allows methods to be added to its library. When called, these methods are passed the jQuery object within the JavaScript ‘this’ object. The DOM nodes can be manipulated as required The method should return ‘this’ so other functions can be chained. How JQuery Plugin Works

18. 1.plugin function 2.options 3.callback 4.ability to chain. JQuery Plugin Components

19. $( "#clickme" ).click(function() { $( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { // Animation complete. }); }); JQuery Plugin Components

20. (function($) { jQuery.fn.hightlight = function(options) { ... }; })(jQuery); (function($) { $.fn.hightlight = function(options) { ... }; })(jQuery); Note: Using ‘jQuery’ rather than ‘$’ ensures there are no conflicts with other JavaScript libraries. JQuery Plugin Declaration

21. //default settings (function($) { $.fn.highlight = function(options) { var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’}; $.extend(settings,options); }; })(jQuery); Options in Plugin

22. $(“p”).highlight(); //uses default settings. $(“p”).highlight(//uses color:white,background:yellow ‘color’:’white’; ); $(“p”).highlight(//uses color:white,background:red ‘color’:’white’ ‘background’:’red’; ); Passing Options

23. (function($) { $.fn.highlight = function(options, callback ) { var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’}; $.extend(settings,options); callback.call(this); }; })(jQuery); Callback function

24. $(“p”).highlight(//uses color:white,background:red { ‘color’:’white’ ‘background’:’red’ },function(){ //execute after complete } ); Callback function

25. (function($) { $.fn.highlight = function(options,callback) { var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’}; $.extend(settings,options); callback.call(this); return this; // it is for chaining }; })(jQuery); Ability to chain

26. Ability to chain

27. THANKS