jquery plugin development
TRANSCRIPT
Plugin Development
By: Nathan SegoTwitter: nathansego
http://typewith.me/jqueryDenver-plugins
Little about me
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
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
Your First Plugin$(‘p’).elementCount();
$.fn.elementCount = function() { alert(‘Element count: ’ + this.length);};
$(‘p’).elementCount();
Plugins and Iteration
$.fn.elementCount = function() { // “this” is a jQuery Object this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); });};$(‘p’).elementCount();
Plugins and Chaining
// Plugin is required to return this$.fn.elementCount = function() { return this;};
$(‘p’).elementCount().addClass(‘Foo’);
Plugins and Chaining
// Plugin is required to return this$.fn.stPatricks = function() { return this.css(‘color’, ‘green’);};
$(‘p’).stPatricks().addClass(‘Foo’);
Using Plugins
Using Plugins
• Include jquery.plugin.js in your project after jQuery & before use
• Call jQuery Plugin Method
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/ )
The Plugin Pattern
The plugin pattern
• Allows safe usage of $ variable
• Encapsulates the plugin into a closure
The plugin pattern
(function($) { $.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); };})(jQuery);
$(‘p’).elementCount();
Plugin Options
Plugin Options
• Options can be– Primitives – Callback functions
• Default Options• Storing Options
with .data()
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});
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!’)}});
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!’)}});
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();
Private Functions
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
Interacting with the stack
Private Functions
(function($) {$.fn.cousins = function() { var newBucket = this.parent().siblings().children(); return this.pushStack(newBucket,”cousins”,””); };})(jQuery);
$(‘p’).cousins();
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
Questions & Demohttp://jsbin.com/jqueryDenver-plugins/edit