Oct 29 2009

35 More Useful jQuery Plugins and Techniques

Advertisement

Do you ever think "Ugh" when it is time to update or redesign your site? jQuery has a fantastic library of plugins and tutorials that can speed the benefits of developing your site while demanding less time and improving workflow constraints.

To present a better user experience, we often need to take good care of the little details like the functionality and interactivity of tables, forms, images or other media resources; excellent navigation and security is also a must. So here are 35 more useful jQuery resources covering those topics as well as many more. Hopefully, you’ll find them helpful for your next web project.

You may also want to consider our previous posts:

35 Fresh and Useful jQuery Plugins is our previous list of useful jQuery plugins featuring navigation, gallery and calendars jQuery plugins.

45+ New jQuery Techniques For Good User Experience which lists over 45 impressive jQuery plug-ins and techniques.

jQuery Resources for Tables

Expand table rows with jQuery – jExpand plugin
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

 Expand table rows with jQuery - jExpand plugin

jQuery Highlight Demo
Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

Highlight Demo

jQuery plugin: Tablesorter 2.0
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data in a cell.

jQuery plugin: Tablesorter 2.0

DataTables (table plug-in for jQuery)
DataTables is a plugin for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

DataTables (table plug-in for jQuery)

Forms jQuery Plugins

Password Strength – Estimates brute force time (jQuery plugin)
Brute force, if your site it attacked, this hacking method can be the very devil. This plugin shows the strength of your passwords by telling you how long it would take to brute force them.

Password Strength - Estimates brute force time (jQuery plugin)

Masked Input Plugin
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.

digitalBush ¬ Masked Input Plugin

Ajax Fancy Captcha – jQuery plugin – WebDesignBeach.com
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop a specified item into a circle. Captcha’s security level is only medium, with the emphasis on nice looking and user-friendly qualities that still offer reasonable protection from unwanted “guests”. The basic design and elements are easy to change and customize; take a look at the file structure for more information.

  Ajax Fancy Captcha - jQuery plugin - WebDesignBeach.com

jQuery plugin: Validation
This robust, flexible jQuery plugin can validate a form like you’ve never been validating before. It is designed for an unobtrusive user experience, annoying the user as little as possible with unnecessary error messages. It helps a site react to more then just a submit event, like keyup and blur, without complex setup.

bassistance.de ¬ jQuery plugin: Validation

Pixelmatrix Design – Announcing Uniform
Any UI designer deals with form controls quite a bit. Often the checkboxes, selects, and radio buttons do not look consistent in all the browsers. Uniform, a plugin for jQuery lets you style select, radio, and checkboxes however you desire.

Pixelmatrix Design 'À

jQuery Nice Form
jQuery Nice allows you to create custom looking form elements, that function like normal form elements. It is a simple form, but you can make it appear as complex or customized as you need.

jQuery Nice Form

JavaScript image combobox v1.5
Are you tired with your old fashion dropdown? Try this new one, an image combo box. You can add an icon with each option. It works with your existing “select” element.

JavaScript image combobox  v1.5

Opensource – AJAX – Jqtransform – jQuery form plugin
This plugin is a jQuery styling plugin which allows you to skin form elements with your own options for whatever browser you use.

 Opensource - AJAX - Jqtransform - jQuery form plugin

Password Strength Meter (a jquery plugin)
Password Strength Meter is a jQuery plug-in to provide you a smart algorithm that can detect the strength of a password.

Password Strength Meter (a jquery plugin)

meioMask – a jQuery mask form input plugin
This jQuery mask form input plugin has many new features, compatibility, usage, options, fixed characters, and rules. Masks can be setup and tweaked to fit your needs, such as fixed or reversed mask types, has function to mask strings, while still allowing hotkey usage. It works with the iPhone, supports metadata plugin, and much more. Metadata will always overwrite the ‘attr’ value.

meioMask - a jQuery mask form input plugin

jQuery AlphaNumeric
jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

jQuery AlphaNumeric

Release: Validation Plugin 1.5.2
An update for the jQuery validation plugin is available. There is a small code fix, a new supported locale (slovak) and most notably, a new demo featuring integration with jQuery UI tabs and grouping selects. Support is available via jQuery discussion list and bug tracker.

 Release: Validation Plugin 1.5.2

jquery-keyfilter
This plugin filters keyboard input by specified regular expression. The source code inspired by Ext.JS, but was modified to provide more accurate logic.

  jquery-keyfilter

boxy – Facebook-like dialog/overlay, with frills
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays by providing an object interface to control dialogs after they’ve been created. It is simple to use and provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

boxy - Facebook-like dialog/overlay, with frills

jQuery Image/Media Resources

jQuery Virtual Tour
This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated. Navigation uses the standard html tags <map> and <area> in accordance with W3C.

jQuery Virtual Tour

Fullsize : A New IMG Tag Attribute
Fullsize is an attempt to get a new attribute called fullsize into the next version of HTML. This is an attempt to bring something truly useful to all web developers. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon and hopefully get the attention of the W3C.

Fullsize : A New IMG Tag Attribute

Simple JQuery Image Slide Show with Semi-Transparent Caption
With this tutorial, you will learn how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display an image, headlines, or news your websites homepage.

Simple JQuery Image Slide Show with Semi-Transparent Caption

Easiest Tooltip and Image Preview Using jQuery
This script adds an element to the body when you roll over a certain object. That element’s appearance is predefined with CSS (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When the cursor is moved over the object, the element moves with it; when the cursor rolls out, the element is deleted. The script takes a title attribute of an A tag and place it inside the popup element. When a thumbnail is rolled over, this script will load an image that we have linked in HREF attribute of an A tag, even if JavaScript is disabled. Also it can link to a URL screenshot preview.

Easiest Tooltip and Image Preview Using jQuery

Jquery Plugin MopTip 2.2
MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one child, then the slider navigation is shown automatically and is resizaable.

Jquery Plugin MopTip 2.2

A jQuery Plugin for Zoomable, Interactive Maps – New Media Campaigns
Using this jQuery plugin, an interactive map can be created so that clicking important bullet locations can bring up more information on that location. Zooming into select sub-regions is also possible.

A jQuery Plugin for Zoomable, Interactive Maps - New Media Campaigns

Navigation jQuery Plugins

Using jQuery Visited Plug-In.
Visited links hide with jQuery, but when clicking on "show all" button it displays the already visited links list in a slide effect.

Using jQuery Visited Plug-In.

jQuery Ribbon
This is a ribbon control built on jQuery. It supports grouping, forms, access keys, fixed position, dropdown menus, nested lists, theming and minimize.

jQuery Ribbon

Further Useful jQuery Resources

js-hotkeys
jQuery.hotkeys is a plugin that allows you to easily add and to remove handlers for keyboard events anywhere in your code, supporting almost any key combination.

   js-hotkeys

jQuery Plugins by Dylan Verheul
To add a Google Map to your site, this plugin makes it easy to put on your page. After getting a valid Google Maps API key, you can add markers for your map and even text if desired.

jQuery Plugins by Dylan Verheul

iPhone-like password fields using jQuery
We do not completely go for the idea of typing passwords in plain text; by default as there will be a loss of security! Not a technical one, but a user-driven one.

iPhone-like password fields using jQuery

Ready for use: CSS3 Template Layout
A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module.”

Ready for use: CSS3 Template Layout

JSS
JSS stands for Javascript Style Sheets, it is a jQuery plugin that allows you to take advantage of the full range of jQuery selectors accross all browsers from within your standard CSS files.

jQuery Stuff
jQuery Stuff has several plugins and demos such as the Ajax Events Demo. Global Ajax Events Demo demonstrates how jQuery’s global ajax events work. Click the generate successful or generate unsuccessful buttons to generate ajax requests. Information from the event handlers will then be printed beneath.

jQuery Stuff

JHeartbeat 0.1 Beta
JHeartbeat is a plugin for JQuery 1.0.1 that allows a web page to periodically poll the server. This polling can be used to keep the user’s session alive or to download updated information.

JHeartbeat 0.1 Beta

jQuery Impromptu
jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Impromptu

jQuery Spotlight
jQuery Spotlight is a jQuery plugin which allows you to highlight elements in your page using a ‘spotlight’ effect. This plugin is highly customizable and requires no external CSS or images.

jQuery Spotlight

jQuery Page Peel 1.2
jQuery Page Peel displays a small animated “peel” on the top right corner of a page. Once the mouse is moved over the page peel, the page rolls down and a large clickable ad is displayed: Once the mouse is moved back onto the main page, the page peel rolls back up.

jQuery Page Peel 1.2

About the Author

Comments and Discussions
  • joyoge bookmark, 29 October 2009

    wonderful resource of jquery, thanks for the post..

  • bogdan, 29 October 2009

    another great article ! thanks ! :)

  • Daniel Winnard, 29 October 2009

    Great resources here, great post, thanks.

  • Webstandard-Team, 29 October 2009

    Very nice collection Vitaly! If you need some more Tablesort-Plugins, don’t miss 7 ways to sort tabeldata!

  • Janko, 29 October 2009

    Nice list of useful tools. Thanks for including jExpand!

  • ehaselwanter, 29 October 2009

    another overview of jquery resources. thx a lot :-)

  • Gabriel, 29 October 2009

    Nice Collection !

  • Dylan Parry, 29 October 2009

    Nice collection of goodies. When taking a proper look at “Password Strength Meter” I saw that there’s a newer version of it available at http://phiras.wordpress.com/2009/07/29/password-strength-meter-v-2/. Apparently the changes are purely cosmetic, but it’s very nice and has a working demo (whereas the page you linked to didn’t seem to—the demo was broken). Cheers—Dylan

  • esranull, 29 October 2009

    very nice look this
    jQuery tools

  • Bored, 29 October 2009

    WOW! ANOTHER of the SAME posts about jQuery plugins. AMAZING!

    I tell ya… I am SO glad Smashing took over… I was getting tired of reading insightful and interesting finds.

    Much better to see the SAME thing posted day in and day out.

    Good lord what a mess!

  • Mary Lou, 29 October 2009

    Great list! Here is a a new and fresh jQuery notification plugin that might as well find a place in the next list:
    http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/

    And the demo is here:
    http://www.tympanus.net/jbar/

  • Kushhy, 29 October 2009

    Awesome post. keep them comin

  • designfollow, 29 October 2009

    thanks for this great post.

  • Hongapk, 29 October 2009

    Thanks for good archive best tools.

  • shamma, 29 October 2009

    Thanks for the post, it would help me in my work alot

  • st3ph, 30 October 2009

    Nice list but in my opinion qTip is far better than MopTip
    http://craigsworks.com/projects/qtip/

  • Srinivas Tamada, 30 October 2009

    Awesome collection as usual

  • rajesh r nair, 31 October 2009

    great place.. great thanks

    rajesh r nair

  • tutorialzine, 31 October 2009

    Such an extensive list! It must have taken quite a while to research. A great job, I might add. Found a lot of plugins that were new to me. Thanks!

  • DJ Designer Lab, 02 November 2009

    Useful resources!! If you want more information, go to this site.

  • Hélio, 03 November 2009

    jquery is everything

  • Rebecca, 05 November 2009

    Please be careful with the Jquery Ribbon.

    Microsoft holds a patent on the Ribbon interface such as that it cannot be used unless you sign a pact with them and many more restrictions.

    Check first so that you stay clear from a possible lawsuit.

  • Farid Hadi, 14 November 2009

    Some cool plugins. Thanks for sharing.

  • HoangDung, Le, 16 November 2009

    Thank you very much for sharing!

  • 3m masr, 01 December 2009

    really great resources !
    i am writing about JQuery validation in my blog as a personal trial and ISA sooner i’ll use these wonderful plugins .

  • anto, 17 March 2010

    really good resources :)
    how to combine jExpand and tablesorter? when i click the data row and click the header for sorting, the data row is not ordered as needed.

  • Stephanie Munhall, 21 September 2010

    I was very excited to find this post.I wanted to thank you for this great read. I definitely enjoying every little bit of it and I have you bookmarked to check out new things you post.

  • Andrew A. Sailer, 07 June 2011

    Generally I do not post on blogs, but I would like to say that this post really forced me to do so! really nice post.

search form
 
image description image description