Developing jQuery Plug-ins

May 26, 2011

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: 'christianvuerings',
    },
  ],
});

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.

Post

Personal blog by Christian Vuerings
I love to share interesting ideas.