Friday, October 30, 2009

35 Useful jQuery Plugins 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 and 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

Katharnavas is the Web, Mobile Application Developer and also a blogger at Katharnavas Designer's Shine. Follow Katharnavas on Twitter for updates, development.

No comments:

Post a Comment