50 jQuery Tools for Awesome Websites131
In this post, we’ve picked out 50 of the best scripts we know of and talked about why they rock. They can help in just about any aspect of a website, so enjoy!
These first tools don’t use jQuery themselves, instead, they’re editors to help you write and edit your own jQuery scripts.
1. Aptana Studio
2. Komodo Edit
3. Spket IDE
4. Coda-Slider 2.0
Coda-slider JQuery plugin, which was published first in September 2007. Their goal was to mimic the regulatory impact on the promo page for Panic Software Coda. Coda-Slider 2.0 was built from scratch and should be much more flexible and lighter than its predecessor.
5. jQuery Treeview Plugin
jQuery Treeview Plugin is Lightweight and flexible transformation of an unordered list into an expandable and collapsible tree, ideal for unobtrusive navigation enhancements. It can even set a cookie to remember how a user last left the menu.
6. Accordion Menu
This plugin creates an accordion menu. It works with nested lists, definition lists, or even just nested divs. It has options to specify the structure in which the active element (to adjust to the first display) and animations.
7. jquery mb.menu
jquery mb.menu is another very powerful component for easy creation of jQuery multilevel tree menu or context menu (right mouse button).
8. jQuery Nice Form
jQuery Nice Form is simple way to create a form, but can also make more complicated forms if you desire.
9. jQuery form validation
jQuery Validation is a jQuery plugin that checks a user’s input as they fill out a form.
10 . Ajax Fancy Captcha
Ajax Fancy Captcha is a jQuery plugin will helps you protect your web pages from bots and spammers.
11. Masked Input Plugin
Masked Input Plugin lets you easily set a format that a form input must be in, e.g. a phone number field could onto contain numbers, dashes and dots.
DataTables is plugin for Jquery. This is a very flexible tool, that adds advanced interactive controls to any HTML table
Tablesorter is a JQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sorted table without reloading the page. Tablesorter successfully analyzes and classifies the different types of data in the cells.
Flexigrid adds a lot of formatting options to tables, including pagination, column sizing and navigation/search controls.
Colorize highlights the columns/rows that a user has currently moused over or selected. You can set the exact color changes you’d like in the options.
Uploadify is a JQuery plugin that allows easy integration of multiple (or single) file upload boxes on your website. This plugin requires Flash as well.
18. Multiple File Upload Plugin
Multiple File Upload Plugin (jQuery.MultiFile) is another plugin for allowing multiple file uploads, but this time without Flash being needed.
Image SlideShows and Galleries
19. Ad Gallery – Custom Photo jQuery Plugin
Ad Gallery takes a simple unordered list of images and then converts them into a, much more presentable, gallery.
SlideViewerPro is another highly recommended script for easily making interactive galleries from your photos.
Pikachoose offers a number of options for displaying your pictures, including slideshows.
Galleriffic has a slightly different layout for its gallery by default, but it looks great!
Galleria is great because it loads progressively, i.e. as each image is loaded, its thumbnail will appear. It won’t make you wait for the entire gallery to come down.
24. Simple Controls Gallery
Simple Controls Gallery is an easy way of making an automatic slideshow of photos for your users, and offers controls for them to pause/skip forward.
25. JQuery (MB)gallery
jQuery (mb)Gallery is a little more complex than some of the other options here, but it supports showing different albums in one gallery so it may be worth the extra effort.
GalleryView is extremely well documented/demonstrated on its page so if you’re unsure about how to set up some of the other plugins, give this one a go!
SUPERSIZED, as you might expect, supports displaying images the full size of the browser window. The cool thing about this is that it will resize the image, keeping their ratios, to fill the screen for you without any part of the picture being cut off.
Easy Slider 1.5 is jQuery plugin that offers many features such as auto slide, continuous sliding, “go to first” and “go to last” button, hiding controls, vertical sliding, multiple sliders on one page, and many more.
jWYSIWYG is a lean script that converts text fields into visual content editors.
HTMLBox can convert any textarea into a visual editor. It is very feature complete and packs in just about any formatting option you could ever need!
32. Lightweight RTE
As the name implies, Lightweight RTE focuses entirely on creating a text editor while adding as little weight as possible to the page. At only 7kb when compressed, I’d say they succeeded!
WYMeditor is a WYSIWYM (What You See Is What You Mean) XHTML editor. It focuses on editing the structure of the content to what the user would like, but leaves the presentation controls to you.
34. Realtime Related Tweets
Realtime Related Tweets displays a set of Tweets in real-time that are related to your post.
Calendars and Datepickers
Transcendent makes it easy to set dates via calendars, and even select whole date ranges between two days.
ClockPick is intended to make setting a time easier. Check out the demo page (click one of the white input fields) to see what you think.
37. Weekly Calendar
Weekly Calendar sets up a great looking calendar very similar in functionality to Google Calendar.
38. UI Datepicker
UI Datepicker makes date entry on forms so much easier for your users.
Visualize is jQuery plugin that turns regular HTML tables of data into charts.
40. JS Charts
JS Charts allows you easily to create a variety of charts, including pie charts, line, and bar graphs.
41. Google Charts GUI
Google Charts GUI uses the Google Charts API to create its charts, so as you can imagine, they look great.
jqPlot’s specialty is for line graphs, as you can see from the screenshot.
43. jQuery Tooltip – Tooltips done right
Tooltips Done Right can set up tooltips with any HTML you like, including images and tables.
Jtip is another tooltip script that gives you a lot of control over the output.
45. jQuery (mb)Tooltip 1.6
(mb)Tooltip 1.6 will take your regular link “title”s and design a nicer looking tooltip from them.
TabContainer lets you easily set up tabbed sections, and fade between them.
47. jQuery UI Tabs – (Update 30 Oct 2012) – This tool is no longer maintained and its site has been deleted.
48. Curvy Corners
Curvy Corners helps add rounded corners to your divs, at least until CSS3 support for border-radius is more common amongst your users.
Thickbox is ideal for displaying images. It loads on top of the rest of your page (Not a traditional pop-up though!) and gives the user controls to browse to the next image, space for content and easy exit controls.
SimpleModal creates a similar effect to Thickbox, but its specialty is in displaying any sort of content you like. No need for it to be an image.
That’s Them All!
Those are 50 of our favorite jQuery tools. We’ve covered a wide range of functionality in this list alone, but there is much more out there!
What jQuery scripts have you used on your sites? Anything we should know about?
Enjoy this post? You should follow me on Twitter!