Webデザイン実践jQuery 本体の有無 •Plugin によっては、jQuery 本体を同梱した状態で配布 している •プラグインに jQuery 本体が含まれているかどうかを確
Jquery plugin development
-
Upload
faruk-hossen -
Category
Engineering
-
view
127 -
download
4
Transcript of 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());
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