In this, Part 7 of my (consistently delayed) series on the jQuery JavaScript framework, I talk about plug-ins you can use to expand jQuery’s features. You may want to read some of the previous six parts before getting into this one:
- [intlink id=”110″ type=”post”]Incorporating jQuery into an HTML page[/intlink]
- [intlink id=”248″ type=”post”]Selecting page elements[/intlink]
- [intlink id=”261″ type=”post”]Adding event handlers[/intlink]
- [intlink id=”298″ type=”post”]Applying effects[/intlink]
- [intlink id=”300″ type=”post”]Manipulating elements[/intlink]
- [intlink id=”302″ type=”post”]Ajax[/intlink]
jQuery itself is a relatively light framework that provides basic, cross-platform functionality. It was intended to be easy to expand and build upon. This way, if you need X feature, it can be added, but if you don’t need that feature, you’re not forcing the user to download all the JavaScript for it. This is a great design, the only problem being how to find and use the plug-in you need.
To start, a lot of common functionality has been put into a separate library, called jQuery UI, short for User Interface. This library adds features like drag and drop, resizing, accordians, tabs, date pickers, progress bars, plus effects. Even though jQuery UI contains all that stuff, you can use the library’s download page to build your own custom version that only defines the features you need. See the jQuery UI demos page for examples and source code. The Getting Started page also includes some good, basic information. In time, you’ll likely want to check out the jQuery UI ThemeRoller, which helps create a custom, cohesive look for the effects to match the rest of your site.
If jQuery UI is missing a feature that you need, head to jQuery’s plug-ins page. There the plug-ins are organized by type, and there are listings of most popular and most recent releases. If you want someone else’s opinion as to which plug-ins are best, a quick search turns up many articles on the subject:
- http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html
- http://speckyboy.com/2008/07/21/20-amazing-jquery-plugins-and-65-excellent-jquery-resources/
- http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html
- http://www.wiliam.com.au/wiliam-blog/the-best-web-2-jquery-javascript-plugins
- http://www.ajaxline.com/10-best-jquery-plugins-march-2009
There are a couple of plug-ins that I personally recommend: Superfish and the jQuery Form Plugin. The former creates “suckerfish”-style navigation menus out of nested unordered links. These are animated, keyboard accessible menus that degrade well. See the examples page to look at this in action. The jQuery Form Plugin makes it easy to integrate Ajax functionality with forms (as form data is commonly used in Ajax interactions). If you look at the examples, you’ll see that it could hardly be easier to make an Ajax request using form data. Plus it has a cool feature where it automatically uses a hidden iframe to handle file uploads (which cannot be handled via Ajax).
So, what else? Date pickers are a popular tool and the jQuery UI includes a version. If you want something fancier, consider the Date Range Picker plug-in. There are also nice color pickers available, like this one. And there are a ton of different image manipulation plug-ins out there, as you can see in the links above and on jQuery’s plug-in page.
