Developer Blog

Developing jQuery Plug-ins

Lately I’ve been developing jQuery plug-ins in my spare time. Definitely go and check out the example pages. One of the main reasons for doing this is to get a grip of the latest API changes in jQuery.

###Plug-ins

• jQuery Favicons - Add favicons to anchor elements on your page.
• jQuery Lifestream - Show a stream of your online activity with jQuery.

###Things I’ve learned * Make it chainable
jQuery has many features, one of them is chainability. Which is the ability to chain one function after the other. The way to do this is by returning the original jQuery object.

$('a')
  .favicons()
  .css('color', '#ff0000');

• Make it configurable
  Default options are OK, but make sure that people can modify the behavior without changing the actual code of the plug-in.

$("#lifestream").lifestream({
  "limit": 30,
  "list":[
    {
      "service": "twitter",
      "user": "denbuzze"
    }
  ]
});

• Make it extendible
  If someone do wants to add extra functionality to your plug-in, make sure they can. One way of doing this is by extending it.

$.fn.lifestream.feeds.lastfm = function(obj, callback){
  // ...
};

A great resource is the jQuery authoring guide.