Pro Blog Design

By now, everyone has heard of jQuery. It’s a framework that makes JavaScript development much easier, and has become massively popular for adding JavaScript functionality to websites.

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!

Editors

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

Aptana Studio is a tool built for making great websites and webapps. It supports a wide range of JavaScript frameworks, including jQuery.

2. Komodo Edit

Komodo Edit is an open source editor that provides features such as auto complete, call tips (CSS, HTML, JavaScript, Perl, PHP, Python, Ruby, Tcl, XML and XSLT), multi-language file support, syntax coloring, syntax checking, Vi emulation, Emacs key bindings and more. One of the most useful features is the ability to extend Komodo Edit. You can find lots of useful add-ons for JavaScript developers like DOM Inspector , Komodo Extension Developer ,Venkman JavaScript Debugger and  Hack It

3. Spket IDE

Spket IDE provides features like code completion, syntax highlighting etc. to help developers create efficient JavaScript code productively. Spket IDE is free for non-commercial use.

Navigation

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).

Forms

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.

Tables

12. DataTables

DataTables is plugin for Jquery.  This is a very flexible tool, that adds advanced interactive controls to any HTML table

13. TableSorter

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.

14. FlexiGrid

Flexigrid adds a lot of formatting options to tables, including pagination, column sizing and navigation/search controls.

15. Colorize

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.

16. uiTableFilter

uiTableFilter allows you to instantly search a table and only display rows with your results in them, e.g. check out the demo page.

Upload Files

17. Uploadify

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.

20. slideViewerPro

SlideViewerPro is another highly recommended script for easily making interactive galleries from your photos.

21. Pikachoose

Pikachoose offers a number of options for displaying your pictures, including slideshows.

22. Galleriffic

Galleriffic has a slightly different layout for its gallery by default, but it looks great!

23. Galleria

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.

26. Galleryview

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!

27. Supersized

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.

28. Easyslider1.5

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.

Content Editor

29.jWYSIWYG

jWYSIWYG is a lean script that converts text fields into visual content editors.

30. MarkitUp!

MarkItUp! is a JavaScript plugin built on the jQuery library. MarkItUp allows you to turn any textarea into a markup editor. HTML, Wiki Syntax, BBCode are all supported, but even better, you can define your own markup language!

31. HTMLBox

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!

33. WYMEditor

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.

Twitter

34. Realtime Related Tweets

Realtime Related Tweets displays a set of Tweets in real-time that are related to your post.

Calendars and Datepickers

35. Transcendent

Transcendent makes it easy to set dates via calendars, and even select whole date ranges between two days.

36. Clockpick

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.

Charts

39. Visualize

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.

42. JqPlot

jqPlot’s specialty is for line graphs, as you can see from the screenshot.

Tooltips

43. jQuery Tooltip – Tooltips done right

Tooltips Done Right can set up tooltips with any HTML you like, including images and tables.

44. Jtip

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.

Tabs

46. TabContainer

TabContainer lets you easily set up tabbed sections, and fade between them.

47. jQuery UI Tabs

jQuery UI Tabs is a simple tool for setting up tabbed content areas on your blog.

Rounded Corners

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.

LightBox

49. Thickbox

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.

50. SimpleModal

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?