Advanced Entries

A Plugin Development Pattern

Tuesday, October 30th, 2007

I’ve been developing jQuery plugins for quite a while now, and I’ve become rather comfortable with a particular style of plugin development for my scripts. This article is meant to share the pattern that I’ve found especially useful for plugin authoring. It assumes you already have an understanding of plugin development for jQuery; if you’re a novice plugin author, please review the jQuery Authoring Guidelines first.

There are a few requirements that I feel this pattern handles nicely:

  1. Claim only a single name in the jQuery namespace
  2. Accept an options argument to control plugin behavior
  3. Provide public access to default plugin settings
  4. Provide public access to secondary functions (as applicable)
  5. Keep private functions private
  6. Support the Metadata Plugin

I’ll cover these requirements one by one, and as we work through them we’ll build a simple plugin which highlights text.
(more…)

Selecting Elements by Properties and DOM Expandos

Wednesday, March 21st, 2007

Sometimes it is very convenient to store information on an element by using custom properties (DOM Expandos). For example, I use DOM Expandos in my Mouse Wheel plugin to store an array of handler methods (_mwHandlers) along with a method (_mwHandler) to call all those handlers when the mouse wheel is used. Storing these methods on the element allows me to write less code, and manage scope easier. It also gives me a function reference for easy removal when needed.

Now, what if I needed to select all elements that have a mouse wheel handler on them?

(more…)

Sacrificial Lambda

Friday, September 1st, 2006

Dynamically binding event handlers to content that has been ajaxed in with $.load without repeating yourself can be tricky. Lambda functions help you to not repeat yourself as much. jQuery uses lamdba functions everywhere, so if you're familiar with jQuery, you should be familiar with the syntax of lambda functions.

In this example, the ajaxed-in content contains the elements that trigger a $.load over themselves.

JavaScript:
  1. prepare_links = function() {   
  2.   var month = $('.calendar-info .month').html();   
  3.   var year = $('.calendar-info .year').html();   
  4.   $('.previous-month').click(function() {
  5.      $('#calendar').load(this.href, prepare_links);
  6.      return false;
  7.   });
  8.   $('.next-month').click(function() {
  9.      $('#calendar').load(this.href, prepare_links);
  10.      return false;
  11.   });
  12. };
  13. $(document).ready(function() {
  14.    prepare_links();
  15. });

Make sure you're not calling the function in the callback by accidentally using prepare_links():

JavaScript:
  1. $('.next-month').click(function() {
  2.    $('#calendar').load(this.href, prepare_links()); /* Don't do this */
  3.    return false;
  4. });

This would set the callback to whatever the return value of the function is, not to the function itself.