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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This plugin filters keyboard input by specified regular expression. The source code inspired by Ext.JS, but was modified to provide more accurate logic.
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.
jQuery Image/Media Resources
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.
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.
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.
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.
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.
This is a ribbon control built on jQuery. It supports grouping, forms, access keys, fixed position, dropdown menus, nested lists, theming and minimize.
Further Useful jQuery Resources
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.
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.
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.
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.”
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.
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.
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 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 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.