jquery plugin development

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