20 Tools to Build Your Website Around jQuery

There are hundreds upon hundreds of jQuery plugins for you to implement on your website. More often than not you can find numerous plugins to accomplish the task you are looking to perform. So how do you decide which to use? The list below isn’t the gospel of the best jQuery plugins, but they’re some of our favorites to build your website around.

Wireframing

Rapid Interactive Prototyping
Developer Mubashar Iqbal put together a wonderful set of wireframe templates for you using the 960.gs CSS Framework and jQuery. For those who prefer a fluid layout, you’re covered. Mubashar developed three templates: Fixed width with jQuery, Fluid width with jQuery and a standard Fixed width without jQuery. All three prototyping templates use a 16 column grid.

jQuery Plugins

Navigation Menus

Superfish
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds much-sought-after enhancements like: animation of sub-menu reveal, timed delay on mouseout, drop shadows, keyboard accessibility and more.

Layout and UI Related

jQuery Tools
jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.59 Kb. It brings the more prominent UI components for using on your website such as: tabs, tooltips, scrollable, overlays, expose effects and more. jQuery Tools is a great collection of UI components that dubs itself “The missing UI library for the Web”.

FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Slide Box jQuery Plugin
Sometimes you may need a sliding div panel at the top or bottom of your website that contain links to various pages or information about the site itself. SlideBox is a jQuery plugin that can take care of that for you, taking any div and transforming it into a top or bottom sliding panel.

Image and Content Presentation

Create a Featured Content Slider Using jQuery UI
Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back. This tutorial shows you how to create a featured content slider for your website using the jQuery UI library. I’m proud to say that I contributed the bit for getting it to pause on hover.

jQuery Cycle
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

FancyBox
FancyBox lightbox style tool that will allow you to display images, HTML content and multimedia in a lightbox that floats over your webpage.

FancyBox Features:

• Adds a nice drop shadow under the zoomed item
• Groups related items and adds navigation (preloades images)
• Can display images, inline, ajax and iframed content
• Customizable through settings and CSS
• Support fancy transitions by using easing plugin

jqModal
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework. You can use your HTML and CSS for styling and it’s highly extensible through callbacks so you can use it for a variety of purposes.

jQuery Kwicks
Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget. Kwicks is a great effect to use for enhanced navigation or even content presentation.

Making a Really Cool jQuery Gallery
One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project. This tutorial will walk you through building a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in.

jQuery Image Overlay Plugin
The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover adding a nice effect and boosting the visual appearance of your UI.

Form Validation and Presentation

jQuery Inline Form Validation
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

Contactable Feedback Form Plugin
Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. Contactable overlays the content onto your page quickly and easily with a slide effect and inline validation. This is a great plugin to create a simple contact form.

Turn Your Form into a Powerful Wizard
If you would, for whatever reason, have a large webform all fields shoud be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields. This detailed tutorial will show you how to turn that long webform into a wizard style form with “steps left” information. There’s also a plugin to download that makes it even easier.

jqTransform
jqTransform is a nice jQuery plugin that allows you to style and skin form elements. Just edit the CSS to customize your form. It’s that simple.

Elastic – Make your text areas grow
This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.

Autocomplete
This jQuery plugin allows you to implement an autocomplete feature on an input field to enable users to quickly find and select some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Tools and Utilities

jQuery.utils
jQuery.utils is a library collection of jQuery plugins and widgets often used by the owner of the project. Some are made by the project owner, some by other authors but they are all under MIT or dual Open Source licenses. It’s a nice collection of plugins and a great library to go to when you are looking for a common utility.

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. This is a great plugin to use for administration areas or user areas in a web application.