Write Your Own jQuery Mini-Plugins

Over the past couple of years jQuery has quickly become the JavaScript framework of choice for many web developers. That includes New Media Campaigns: we include a call to the Google Code-hosted copy of jQuery in our blank template for new sites. With the growing popularity of jQuery has come a growing number of plugins and copy-and-paste code examples that extend upon its base functionality. Some of these are well thought-out and high quality solutions to common development needs—jQuery Validation and jQuery Cycle, for instance. But for efficient solutions to simple problems, developers are often cheating themselves by relying on pre-built solutions and would do better to write their own custom mini-plugins.

The Best Tool for the Job

The first reason you should consider writing a custom solution to your interaction needs is to get exactly the functionality you need. It is rare that you will find pre-existing code that is perfect for your project: usually it will either force you to compromise your desired result to fit the capabilities of the plugin or it will include many lines of code to cover variations and edge cases that you will never use. By writing your own you can do what is needed—and only what is needed.

Learn Something New

The other reason to roll your own mini-plugin is that you will invariably learn something new along the way. Have you ever driven a friend somewhere, with them giving you turn-by-turn directions all along the way, and then realized you couldn't remember how you got there? Whereas if you had tried to find it on your own you may have gotten lost a few times but you would then have had the route cemented in your mind. The first time or two that you try to write your own mini-plugin for a drop-down menu you will need to refer back to the documentation frequently. But after that you will have a much better understanding of what is going on under the surface and when you need to customize pre-existing code or write more complex interactions you will have a far easier time of it.

Getting Started

NMC's own Joel Sutherland wrote about the basics of writing a jQuery plugin or, for a more complex plugin template, I refer to Learning jQuery (also see the book by the same name). I generally prefer the plugin format, since it offers cleaner syntax and is easy to reuse for multiple elements within your site. That said, in many cases it is overkill. If you know for sure that the code will only apply to one element and it is just a few lines long, I might write it directly within your $(document).ready(function() { }); block.

Examples

I was going to include examples of custom mini-plugins I have written for recent projects, but since the point is for you not to copy code from blogs like this one I will just list a few common cases where you might be tempted to let Google do the work for you.

• Drop-down Navigation Menus: Make it work with CSS first, then write a mini-plugin for Internet Explorer compatibility and visual effects. Have it slide down, fade in...or some unique combination of animations.
• Tabs: Sure, jQuery UI Tabs are great and have more options and callbacks than you will ever be able to remember. But do you really want to load a 123kb (compressed) script just to switch between a two panels of content?
• Overlay: Believe it or not, you can write a simple Thickbox-style pop-up in a few dozen lines of code. And it won't look like every other site out there (unless you want it to…).
• Image Cross-Fading: If all you need is a series of images that fade from one to the next, jQuery Cycle or InnerFade might be overkill. Write your own and make it work just the way you want.

Hopefully this has inspired you to stop blindly copying and start making deliberate decisions. Please share other cases that could be best served by a custom-written mini-plugin in the comments.