50 jQuery Tools for Awesome Websites
130
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.
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 – (Update 30 Oct 2012) – This tool is no longer maintained and its site has been deleted.
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?
Enjoy this post? You should follow me on Twitter!
About the Author
denbagus
Denbagus.net is a weblog that provides Web Technology resources , web 2.0, web apps, web technology trends, open source, free stuff , tips and trick. You can follow on Twitter or contact him through his website.
Related Posts
-
Tools For Choosing a Color Combination
5th September 2007
-
25 Color Combination Tools For Designers
25th January 2010
-
33 Websites For Vector Image Downloads
12th October 2009
-
35 Awesome User Interface Design Tutorials
6th April 2009
Great Post))) Big Thanks!!!
Welcome, great to hear you liked it! :)
WE DO FOLLOW!? Awesome.
Wow… just wow. Thank you so much for this post, this is definitely a keeper in my bookmark collection.
Keep up the good work!
Sounds like you spied a few tools in there that you like the look of, that’s great!
awesome post! I’ve bookmarked it and intend to try them all! thanks
Awesome Mandie, let me know which ones you find most helpful!
WOW… Mind Blowing post, tweeting and sharing on google buzz right now. Bookmarking for the future.
Thanks Syed, that has to be one of our first buzz shares!
Thanks
hdsahdukshuha
Do you have any lists of tutorials for the likes of me that would like to start using jQuery? Looks good! M.
Nice list! I use jQuery Accordion on my own blog to great effect to show/hide comment reply forms. jQuery is a really great framework!
Hi Denbagus
Lot of work went into this post. And the reward… a guest post on Pro Blog Design… got to be worth the effort.
I’ve used a simple image rotator on a couple of my html sites. There are lots of image rotators out there but this one has a great fade in and if javascript is not enabled, it simply displays the first image.
Nice list. I also enjoy Colorbox for lightbox effect that can be customized easily with css.
Great post. Very useful, thanks for sharing. Anyway, please check the link for Coda-Slider as i found that it links to non-content page.
Also thanks for posting our Fancy Captcha tool :)
wow great news
Great review, it was a very useful info to help in selecting the right tool to use for developing a website. It is also contains great pics that help in describing the different tools.
Very helpful post, I’m always looking for great tools for forms, Twitter, and of course tabs.
Thanks for sharing :D
well this is how l endup here. thanks guys/girls very useful
@Keith-davis thank you for your feedback
@advertising&marketing maybe some day will create article for that
What a great list. So many different uses and functionalities. I like the AJAX captcha and the tabs. JQuery sliders are becoming more widely used in a lot of web design I see now and often used as an alternative for Flash.
Keep up the great blogging :)
Is anyone concerned that jQuery might slow the website down or have issues with other plugins?
I had also few problems with it, when it was picking all $ signs as its own functions , but in fact they were from other plug-ins. In that case I had to turn on the noConflict in the jQuery file.
var $j = jQuery.noConflict();
As for the speed solution, I use WP-Minify on my blog, but be aware … i usually exclude some of the .js and .css being minified because u get a big BLAH.
But if you are not concerned about criticism from a Speed add-on then u r fine :)
One possible way around the speed issue is to use the Google-hosted versions of jQuery and other libraries. They’ll be cached by the user, and there’s a good chance some users will already have them cached (Because a lot of sites use that same link)
I never thought about that, is that simple to integrate with wordpress?
Plugins are so nice for those of us who really don’t know jQuery well enough to write a functional code from scratch! Thanks for the great list!
Great list! I’d hear of most of these before but that Ajax Fancy Captcha looks fantastic, definitely going to be adding that one to the next web development project!
Cool, let us know how it works out for you! :)
Real great selection, i will probably try Tooltips Done Right for one of my admin site.
Looks good, thanks for the great list :)
Great! post
Bookmarked it !
Thats great article..Thank you so much
Excellent collection of tools Dan.
Forwarded to my dev team and bookmarked for prosperity! :)
-dee-
Thanks for sharing, denbagus. Some of this tools is really awaysome.
Great resource! Maybe you could add some drag/drop and sortable stuff to it next time. I believe there’s a lot of question for this. Keep it up!
Great list of jQuery Tools. jQuery in itself is such a powerful tool that I find myself using it more and more everyday. Thanks!
Thanks, jQuery Tools, is very interesting.
these are good jquery tools thank you
Thanks for the excellent resource collection. Helped me alot in making my wordpress website.. Looking for such gr8 posts!!!
Thank you for this nice colection ;)
Some really useful stuff here thank you! I can’t imagine I will use most of them but some of the image galleries look really nice, and I would find good uses for the tabs and the tooltips.
I’m really liking the easy slider, I’m starting to fade flash out of my designs and start using jQuery a lot more. It is a lot more SEO friendly and once its been used a few times its relatively easy to get working.
I would love to learn to code jQuery from scratch, I just don’t have the time to learn at the moment, but if anyone has any good resources for learning jQuery that would be great!
Thanks for sharing the list.
grt post dude
Wonderful collection. Luv your blog. Keep up the good work. tnx!
use jQuery Accordion on blog to great effect to show/hide comment reply forms.
let me know if you have a comment-reply form submission
Great jQuery resource. I know I could use most of these tools for my websites. I’ve only just started using jQuery but I will bookmark this post for future reference. Thanks for all of these.
how did you do the comment-reply form? do you know of an example
This is an amazing list which will definitely by useful when I’m developing new web applications.
tanks :)
nice tools… thank you ;)
I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the
beginning to the end. I would like to read newer posts and to share my thoughts with you.
very suprice, thanks very much
Very nice tools you referenced .
thanks for posting this one.
plzzzzzzzzzz keep up these type of posts.
Thanks for the great list, I have found myself using Galleriffic a lot lately due to its simplicity and excellent user interface, recommended to all.
I’ve used a simple image rotator on a couple of my html sites. There are lots of image rotators out there but this one has a great fade in and if javascript is not enabled, it simply displays the first image.
I usually do go through the spam filter, so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
Great list! I can make use the tools for my websites.
That google charts jquery tool looks amazing
I really like when I can find everything in right place! Great! (somebody did dirty job :) thankssss +FAV
50 jQuery Tools for Awesome Websites for thanx.
I love the Galleria, its really wonderful. This will be very helpful for me since I am currently building a web site that has lots of pictures and videos.
Really great article and nice examples for the coolness of jquery, thanks!
so even the simple fact you have a Gravatar will help any future comments of yours stand out for me
Wow, this is cool. I just heard of jQuery the other day for the first time. Do you guys know where I can find a good tutorial?
I would love to master jQuery.
It’s a framework that makes JavaScript development much easier, and has bec
I’m using jquery and also jquery tool on my site. But now I found also nice jquery navigation menu here :)
I would love to see some of the work you have, but I can’t seem to open your site. Do you have other sites where you demonstrate some jQuery?
Very nice list! I’ve heard about a lot of them and used a few here and there, but this will definitely be a post that I’ll refer back to when I’m looking for something new. Thanks!
Thanks for the post! Very handy stuff!!
Firstly, the comparison between Cantona and Berba are well off the mark. Yes both have the instinct for genius..and the unlikely.
Awesome Collection of Jquery.
Very much appreciated..
Is there a new collection of Jquery plugins releasing shortly ???
I did wanted to use the Jquery for one of my major clients at
http://www.topworlddirectory.com
I just wanna ask for a permission to use your Jquery plugins ?
The beautiful Jquery plugins you design would make any site a beauty.
I would appreciate your reply.
Julie
You guys are the greatest!
Thanx a mil!
I’m a huge jquery fan and I’m constantly working out new ways to learn it and get more out of the framework. I have the “Jquery: Novice to Ninja” at home I’m starting to go through.
good post ,thanks! This article was Very helpful. i like your website,I am fond of reading online punjabi news.
Hi!!
What jquery script have this site to reply comments?
Thanks!
This is what i like about this site! A goldmine for WP info/tips/tricks. Thank you!
Hi!!!
What jquery script have this site to reply comments?
Thanks!
This is very helpfull Thanx
good post ,thanks!
A great resource thank you!
The Ajax Fancy Captcha was just what I was looking for. Nice one :)
thanks for the best post, love it.
Here are other fantastic jQuery tutorials jQuery Duplicate Fields Form Submit with PHP
Thank you for your post. This article and comments have raised some very interesting points. Very Glad that you shared this to us. It’s some pretty great info. Valuable information I found, keep on posting.
Sounds good, this tools will help me a lot in my website, how can I download this tool? Thank you.
Good thing you created this tool. Thanks for sharing it.
Woow! Thanks for sharing. This works beautiful. I must learn Jquery at very short time.
This article and comments have raised some tenant Screening very interesting points. Very Glad that you shared this to us. It’s some pretty great info.
This article and comments have raised some very interesting tenant Screening points. Very Glad that you shared this to us. It’s some pretty great info. Valuable information
I’m a huge jquery fan and I’m constantly working tenant Screening out new ways to learn it and get more out of the framework.
This article is truly relevant to my study at this moment, and I am really happy I discovered your website.
Thanks for this sharing !!!!
I found this post searching for jquery image galleries for my site. The ad gallery rotator worked perfect for the front of my site. This is a good list to bookmark.
The jquery menu and tree views work great and are compatible with every browser I tried it on. Also, the datatable is reminiscent of the datagrid in .net which works great when using php or rails.
Bealfull, good, very good. my help you
Thanks you….
Beealfull, very good this posts
Thanks, very thanks
I use quite a few of these JQuery tools on http://www.wpinsite.com. Website would be dull and static without them.
Thanks for the helpful collection of resources.
My company offers another helpful tool — EasyRotator, a free jQuery Slider / Rotator builder. You can download at http://www.dwuser.com/easyrotator/ . It makes it easy to add jQuery sliders / rotators to your site.
There’s so many jQuery Tool. It would be helpful to me..
thanks this tips for json/jquery
You have a very nice and motivating posting style, it makes me read your articles with great interest.
Thanks for the helpful collection of resources.
Thanks for this 50 plugins collection, ill bookmark this for future reference
so I may give that Advanced Metrics book a go. Thanks!
Very helpful info presented here.
The table plugins looks great. Hopefully we can find some use for them!
thanks for this collection
This is excellent collection of tools that will really helps to find out best color combination for website.
Wow, best list Ive seen yet! Thanks alot!
Hi! Nice article! I will like to recomend this site!
Whoa, this is an amazing list. I suppose I’ve been out of the loop for so long, but I absolutely had no idea that these great apps existed! Thanks for sharing. :)
I will come back again!reative writing ability has inspired me. Really the article is spreading its wings rapidly.
This Jquery tools are awesome. I can’t believe they can do that! It so great for a designer like me!
I would like to suggest free PHP IDE Codelobster PHP Edition – http://www.codelobster.com with special plug-in for JQuery.
hello, your website is really good. We do appreciate your give good results
Great information, better still to find out your blog that has a great layout. Nicely done
The Dark Knight Rises
thanks for this great list. I have been looking for sites like these, I wasn’t even aware of most of these
So what’s the aim of “50 jQuery Tools for Awesome Websites | Pro Blog Design” ?
Magnificent goods from you, man. I’ve understand your stuff previous to and you’re just extremely fantastic. I actually like what you have acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it smart. I cant wait to read far more from you. This is actually a tremendous website
Great collection! I was looking for a Canvas editor with a toolbox, unfortunately that was not in the list but I ended finding very good content.
thanks for the good list its very helpful to me thanks
nice collections
thanks for sharing
wow how many comments!
by
sivakumar
softland India Ltd
thanks for sharing it..!!!
Really nice. This time I just had to comment because I was so happy to get this amazing list.. I have implemented the jquery form in my site.
Absolutly great list! Love the mb.menu! Thx for it.
Wow… thanks for such a great list of jQuery plugins collection. I appreciate your efforts!
Have you considered adding some videos to the article? I think it will really enhance viewers understanding.
What’s Taking place i’m new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has helped me out loads. I’m hoping to contribute & help other users like its helped me.
Great job.
Way cool! Some very valid points! I appreciate you penning this
write-up and the rest of the site is very good.
Hello there, I found your website by way of Google whilst
searching for a similar matter, your web site got here up, it seems great.
I’ve bookmarked it in my google bookmarks.
Hello there, simply was aware of your blog thru Google, and found that it is really informative. I’m going to be careful for
brussels. I’ll be grateful in the event you proceed this in future. Numerous people can be benefited out of your writing. Cheers!
Hi fantastic website! Does running a blog similar to this require a massive amount work?
I have absolutely no expertise in coding but I had been hoping to start my
own blog in the near future. Anyways, should you have any ideas
or tips for new blog owners please share. I understand this is off subject
however I simply had to ask. Thanks!
Good day! I could have sworn I’ve been to this site before but after reading through some of the post I realized it’s new to me.
Nonetheless, I’m definitely happy I found it and I’ll be
bookmarking and checking back often!