jQuery Plugin Development
-
Upload
nathansego -
Category
Technology
-
view
1.143 -
download
1
Transcript of jQuery Plugin Development
![Page 1: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/1.jpg)
Plugin Development
By: Nathan SegoTwitter: nathansego
http://typewith.me/jqueryDenver-plugins
![Page 2: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/2.jpg)
Little about me
![Page 3: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/3.jpg)
What we will go over
• What is a plugin?• Write your first plugin• Using Plugins• Finding Plugins• The plugin Pattern• Plugin Options• Private Functions• Interacting wit the stack
![Page 4: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/4.jpg)
What exactly is a plugin?
• A plugin is a jQuery method defined externally to jQuery Core
• A collection of one or more methods
• Extends the core jQuery prototype object
![Page 5: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/5.jpg)
Your First Plugin$(‘p’).elementCount();
$.fn.elementCount = function() { alert(‘Element count: ’ + this.length);};
$(‘p’).elementCount();
![Page 6: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/6.jpg)
Plugins and Iteration
$.fn.elementCount = function() { // “this” is a jQuery Object this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); });};$(‘p’).elementCount();
![Page 7: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/7.jpg)
Plugins and Chaining
// Plugin is required to return this$.fn.elementCount = function() { return this;};
$(‘p’).elementCount().addClass(‘Foo’);
![Page 8: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/8.jpg)
Plugins and Chaining
// Plugin is required to return this$.fn.stPatricks = function() { return this.css(‘color’, ‘green’);};
$(‘p’).stPatricks().addClass(‘Foo’);
![Page 9: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/9.jpg)
Using Plugins
![Page 10: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/10.jpg)
Using Plugins
• Include jquery.plugin.js in your project after jQuery & before use
• Call jQuery Plugin Method
![Page 11: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/11.jpg)
Finding Plugins
• http://plugin.jquery.com• Google Code• GitHub• Signs of a poorly written jQuery Plugin
(Remy Sharp: http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ )
![Page 12: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/12.jpg)
The Plugin Pattern
![Page 13: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/13.jpg)
The plugin pattern
• Allows safe usage of $ variable
• Encapsulates the plugin into a closure
![Page 14: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/14.jpg)
The plugin pattern
(function($) { $.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); };})(jQuery);
$(‘p’).elementCount();
![Page 15: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/15.jpg)
Plugin Options
![Page 16: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/16.jpg)
Plugin Options
• Options can be– Primitives – Callback functions
• Default Options• Storing Options
with .data()
![Page 17: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/17.jpg)
The plugin pattern
(function($) { $.fn.elementCount = function(options) { return this.each(function(i) { var j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); };})(jQuery);
$(‘p’).elementCount({start: 10});
![Page 18: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/18.jpg)
The plugin pattern
// Pass a callback function into the plugin(function($) { $.fn.elementCount = function(options) { var j; options.begin(); return this.each(function(i) { j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); };})(jQuery);
$(‘p’).elementCount({ start: 10, begin: function() {alert(‘BEGIN!’)}});
![Page 19: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/19.jpg)
The plugin pattern
// Pass a callback function into the plugin(function($) { $.fn.elementCount = function(options) { var j; if( $.isFunction(options.begin) ){ options.begin(); } return this.each(function(i) { j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); };})(jQuery);
$(‘p’).elementCount({ start: 10, begin: function() {alert(‘BEGIN!’)}});
![Page 20: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/20.jpg)
The plugin pattern
// Set a default option(function($) { $.elementCount.default = { start: 0 }; $.fn.elementCount = function(options) { options = $.extend({}, $.elementCount.default, options); return this.each(function(i) { var j = i + options.start; $(this).html($(this).html() +‘ ‘+ j); }); };})(jQuery);$(‘p’).elementCount();
![Page 21: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/21.jpg)
Private Functions
![Page 22: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/22.jpg)
Private Functions
(function($) { $.fn.elementCount = function(options) { var j; return this.each(function(i) { j = doCount(options.start,i); $(this).html($(this).html() +‘ ‘+ j); }); }; function doCount(start,i) { return start + i; }})(jQuery);doCount(10,20); // Method not found
![Page 23: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/23.jpg)
Interacting with the stack
![Page 24: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/24.jpg)
Private Functions
(function($) {$.fn.cousins = function() { var newBucket = this.parent().siblings().children(); return this.pushStack(newBucket,”cousins”,””); };})(jQuery);
$(‘p’).cousins();
![Page 25: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/25.jpg)
What we will go over
• What is a plugin?• Write your first plugin• Using Plugins• Finding Plugins• The plugin Pattern• Plugin Options• Private Functions• Interacting wit the stack
![Page 26: jQuery Plugin Development](https://reader036.fdocuments.net/reader036/viewer/2022062418/5558bd50d8b42a7e298b5175/html5/thumbnails/26.jpg)
Questions & Demohttp://jsbin.com/jqueryDenver-plugins/edit