JQuery Plugin Development

Faruk Hossen

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

➢ jQuery is a javascript object. var jQuery = function( ) { //object properties go here.

};

JQuery Object

➢ ‘$’ 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

➢ Javascript prototype object is ■ $.fn or ■ jQuery.fn

JQuery Prototype Object

➢ 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

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

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

jQuery.fn = jQuery.prototype.

from jquery source code:

jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // ... return this; } // jQuery API methods }

What is $.fn

➢ 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’

$( "p" ).click(function() { $( this ).slideUp();//is it wrong? this.slideUp() //is it wrong?});

What is ‘this’ (continues…)

jQuery.fn.newTarget = function() {this.hide(); //will it show error?$(this).hide(); //will it show error?

}$(‘p’).newTarget();

What is ‘this’ (continues…)

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.

➢ Portability➢ Time

Why JQuery Plugin

➢ 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

➢ 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

➢ 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

1.plugin function2.options 3.callback4.ability to chain.

JQuery Plugin Components

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

});

JQuery Plugin Components

(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

//default settings(function($) {

$.fn.highlight = function(options) { var settings = {‘highlight-color’:’white’,’highlight-

background’:’yellow’};

$.extend(settings,options);

};})(jQuery);

Options in Plugin

1. $(“p”).highlight(); //uses default settings.

2. $(“p”).highlight(//uses color:white,background:yellow‘color’:’white’; );

3. $(“p”).highlight(//uses color:white,background:red‘color’:’white’‘background’:’red’; );

Passing Options

(function($) {$.fn.highlight = function(options,callback) {

var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’};

$.extend(settings,options);

callback.call(this); };

})(jQuery);

Callback function

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

Callback function

(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

Ability to chain

THANKS