5 Must-Have jQuery Plugins

Part of what makes jQuery so great is not only does the core functionality make life easier, but the extensibility of the library has opened the door to countless plugins that also make life easier. I use jQuery at my job just about on a daily basis (I’ll admit, I’m a bit of a jQuery junkie) and have used many different plugins. The following is a list of my top five favorites that I keep coming back to again and again.

Superfish

Odds are, if you’re building a web site, that site is going to have some sort of navigation. While there are many plugins for jQuery that are specific to menu functionality, I find Superfish to be my favorite for a number of reasons. First, the actual jQuery code that goes into implementing it is extremely minimal (as is the case with many plugins):

$(document).ready( function() {

$('#menu').superfish();
});

Where “menu” is the id of the unordered list of menu options. The markup for Superfish is also very unobtrusive. The only markup that needs to be added is class=”sf-menu” to the ul tag. Markup for a Superfish menu would look like the following:

<ul id="menu" class="sf-menu">

Menu Item 1

Menu Item 2

Menu Item 3

Menu Item 3 - Sub 1

Menu Item 3 - Sub 2

Menu Item 4

Superfish is also pretty customizable if you choose to do that. The default alignment is horizontally, but it also offers options for both vertical alignment and a nav-bar alignment that displays sub-menu items in a small bar that spans the entire width of the menu, instead of a pre-defined area like the default styling does. To change the orientation of the menu, simply add a class of “sf-vertical” or “sf-navbar” to the ul tag along with the “sf-menu” class (class=”sf-menu sf-vertical”) and include an additional stylesheet.

With its quick implementation and ease of customization, Superfish is an excellent choice for a menu plugin. For more documentation about how to further customize, and to download the source code along with examples,

Visit the Superfish site

jqModal

There are a ton of modal window plugins for jQuery and I have yet to find one that is bad by any means, but I happen to prefer jqModal over the rest. I’m not going to rip on any other modal plugins or scold you for using a particular one over another. This is simply why I like this particular plugin, and I do not care to wax intellectual with anyone over which is the best one out there.

I like jqModal because it is very bare-bones. All it gives you is a grayed-out window with a blank canvas and leaves the rest up to you, which I think makes it quite an all-purpose plugin. The code for it is very simple as well. To initialize a particular element as a jqModal window, use the following code:

$(document).ready( function() {

$('#modal-window').jqm();
});

Then in the markup, have something like this:

The next step is to add a trigger for the modal. This is also really easy. While jqModal offers a few ways to add a trigger, I find the best way is to add it inside of a click function bound to the element you want to trigger the modal. For example:

$(' #modal-open').click( function() {

$('#modal-window').jqmShow();
});

Then in your markup have an element like this:

View Lightbox Window

By default, clicking the gray area outside the modal window will trigger the close event. However, it’s probably not a bad idea to have an element inside your modal window to close it. To do that, the jQuery code and HTML markup look very much like the code to open the window:

$(‘#modal-close’).click( function() {

$(“#modal-window’).jqmHide();

});

And the markup looks like:

Close this window

That is about all you need to know to get started with jqModal. It’s very customizable. The accompanying stylesheet is very small and is easy to build upon, and the jQuery code allows you to use it in a number of different ways. To learn more about jqModal and download the source code,

Visit the jqModal website

jQuery Bookmark

Social bookmarking is creeping on to more and more sites. The company I work for deals primarily with online marketing for consumer brands, and I have found myself more and more coding “Add to Facebook” or “Tweet This” functionality. As with just about anything I find myself doing over and over, the need for a stable, reusable module soon became high priority. However, I recently discovered and had a chance to play around with the Bookmark plugin, and I will definitely implement it in the next project that calls for any sort of social bookmarking. Not only is the code fairly simple (like most of my favorite plugins), but it comes with built-in functionality for a ton of sites (many of which I haven’t even heard of). The most basic implementation looks like this:

$(document).ready( function() {

$('#bookmarks').bookmark();
});

This will display a bookmark box with every single site that is built in to the plugin. However, since you may not want that, there is also a way to specify the sites that should be included:

$(‘#bookmarks’).bookmark({sites: “facebook”, “digg”, “delicious”});

In addition, you can also add your own sites:

//add a new site
//parameters: (id, display name, icon url, site url)
//id:  string that will be used to reference the site in the function ('digg', 'facebook', etc)
//display name: text that will be displayed on the page
//icon url: path to the icon to be used
//site url: path to the site being added
$.bookmark.addSite('myexamplesite', 'My Example Site', 'myexamplesite.png', 'http://www.myexamplesite.com?url={u}&title={t}');

There is a ton of other stuff you can do with this plugin. If you’re interested,

Visit the site and download the source code

DataTables

This is by far the coolest jQuery plugin I have come across. The sheer amount of stuff this bad boy can do is mind-blowing. Simply by calling the initialization function with the default settings like so:

$(document).ready( function() {

$('#tabular-data').dataTable();

});

you will be amazed by how much you can now do with that table of data. The only requrements for the markup in order for this to work are that the table must include the

and

tags. By simply doing this, you table will include functionality to search your entries, display a given number of entries, pagination, and will also add classes to alternating rows to allow you to add zebra styles to your table. Keep in mind this is all with the default configuration. Pretty cool, huh? If you add class=”sorting” to particular

element, you can also sort the table by that particular column. There is an unbelievable amount of customization that can occur with this plugin. Rather than explain it all, I suggest you visit the official site and read the documentation yourself. Again, this is definitely my favorite out of this list.

DataTables.net

jQuery UI

Ok, so I admit, this last one may be a bit of a cop-out, but I really felt it necessary to put on here. jQuery UI provides built-in functionality for so many things that so many people have wasted so much time building themselves. Custom dialog boxes, draggable elements, date pickers, tabs, and progress bars just to name a few. Adding jQuery UI elements to your page can really make it function like a desktop application. Like the previous plugin, there is simply way too much stuff that it can do to explain here. I would definitely recommend checking out the documentation though and using it.

jQuery UI

So there you have it, a list of my five favorite plugins that have saved me a lot of time and headaches, and continue to do so. Hopefully you find these as useful as I do. I encourage you to check out the repository of jQuery plugins on the official jQuery site, as you may find that what you are trying to do may already be built and ready to go.