Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

How to Write a jQuery Plugin

June 9th, 2010 Posted by Don Albrecht

I know there’s a slew and a half of tutorials on this out there, but I’m adding my own to the mix.  I’ve been working on a generic template for plugin development and have cobbled together what I feel is a solid one.

First thing first, however, building a plugin is about being a good citizen

  1. You’ve got a naming convention to deal with.  jquery[your plugin name].js
  2. Be considerate of the $.XXX namespace.  Only claim 1, and try to make it both developer friendly and unique.  In our case it will be $.plugin
  3. Always return this.
  4. Always end with a “;”
  5. Wrap the entire thing in an anonymous function call, this will protect the plugin from instances where jquery has been renamed. 

So, with all that said and done, the skeleton of a plugin looks like this:

   1: (function($) {

   2:  

   3:   $.fn.myPlugin = function(settings) {

   4:     var config = {'foo': 'bar'};

   5:     if (settings) $.extend(config, settings);

   6:     this.each(function() {

   7:       // element-specific code here

   8:     });

   9:     return this;

  10:   };

  11:   

  12:    var newMethods = {

  13:        a   : function() {

  14:                 var config = {'foo': 'bar'};

  15:                 if (settings) $.extend(config, settings);

  16:  

  17:                this.each(function() {

  18:                   // element-specific code here

  19:                 });

  20:  

  21:                 return this;

  22:                   },

  23:        b   : function() { return this },

  24:        c     : function() { return this }

  25:       };

  26:       

  27:  jQuery.each(newMethods, function(i) {

  28:    jQuery.fn.myPlugin[i] = this;

  29:  });

  30:  

  31:  

  32: })(jQuery);

 

Note, what this code is doing.

First, we define the core behavior of the plugin, then extend the plugin once.  This way we keep our declarations concise, clear and well encapsulated.

We have an established closure structure for shared private functions.

We keep everything encapsulated to protect the jquery namespace as much as possible, and iterate over the child functions to extend the plugin.

PS– most of this is adapted from the jquery extension guide here: http://docs.jquery.com/Plugins/Authoring

Filed under Article, jQuery
2 Comments

Smart Area: A Lightweight Resizing Text Area Plugin for jQuery

November 14th, 2007 Posted by Don Albrecht

Here’s a quick and dirty little jQuery plugin to create text areas that automatically resize.

I based it off of Richard McMahon’s Prototype Version

jQuery.fn.smartArea = function (){

return this.each(function() {
if (!jQuery(this).is("textarea")) {
return false;
}

jQuery(this).click( function(){
jQuery.SA.resizeArea( this ); } )
.keyup( function(){
jQuery.SA.resizeArea( this ); } );
return this;

});

}

jQuery.SA = {
resizeArea : function ( t ) {

var lines = t.value.split('\n') || [];
var newRows = lines.length;
var oldRows = t.rows;
for (var i = 0; i < lines.length; i++)
{ var line = lines[i]; if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
}
if (newRows > t.rows) t.rows = newRows;
if (newRows < t.rows) t.rows = Math.max(1, newRows);

}
}

Filed under Tools, jQuery
7 Comments

jQuery Dimension Plugin, Spacial Awareness Made Simple

October 31st, 2007 Posted by Don Albrecht

One of the most powerful jQuery plugins is dimension.  Using dimension you can obtain the position, height & width of just about any element on the page and the window itself.

Uses:

  • Determine dimensions of document
  • Determine dimensions of window
  • Determine scroll offsets of containers
  • Set scroll offsets of containers
  • Determine dimensions of container contents
  • Determine absolute position of elements
  • Determine dimensions & offsets of parent elements.

Find Plugin & API Documentation here:

 http://brandonaaron.net/docs/dimensions/

Filed under jQuery
3 Comments