Jquery plugin development

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());

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"

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 function
2.options
3.callback
4.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

//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.
1. $(“p”).highlight(//uses color:white,background:yellow
‘color’:’white’;
);
1. $(“p”).highlight(//uses color:white,background:red
‘color’:’white’
‘background’:’red’;
);
Passing Options

(function($) {
$.fn.highlight = function(options,callback) {
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) {
callback.call(this);
return this; // it is for chaining
};
})(jQuery);
Ability to chain

Jquery plugin development

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Jquery plugin development (20)

Recently uploaded (20)

Jquery plugin development