95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

AJAX Upload
AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries.
Demo

File Style Plugin for jQuery
File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

How to create Skype-like buttons using jQuery
If you use Skype We am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

jquery.Combobox
An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
Demo

Masked Input Plugin for jQuery
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).

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. The following mask definitions are predefined:

  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)

The jQuery Tooltip
jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

Table Row Checkbox Toggle
It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

jQuery.timepickr.js
jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

Make image buttons a part of input fields
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

Custom Checkbox with jQuery
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jQuery Checkbox
Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

jQuery Sliding Contact Form
A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included.
Demo

jQuery – Ajax Contact Form
A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user.
Demo

jQuery – Ajax Contact Form
This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page.
Demo

jQuery Contact Form
Submit A Form Without Page Refresh using jQuery
“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “

Simple Image Submit Button Rollovers with jQuery
Have you ever wanted a simple rollover technique with a form submission button? Something like this:

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

jQuery Tabs and Menus

Sexy Drop Down Menu jQuery & CSS
Drop-down menus are not new and a lot of sites use them but this tutorial rocks! Soh teaches us how to create a ’sexy’ menu using jQuery and CSS that degrades gracefully.

How to Create a MooTools Home Page-Inspired Navigation Effect
A simple side menu realized in jQuery.

BBC Radio 1 Zoom Tabs
How to recreate the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Learning jQuery: Fading Menu – Replacing Content
In this tutorial Chris teaches us how to create a good looking fading menu!

jQuery look
Two effects are inspected. Simplified accordion and a hover effect.

jQuery sliding menu revisited
Tutorial showing how to create a nice sliding menu. Images are preloaded and the entire block is click-able.

Create fancy share box with CSS and jQuery
This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box.

Collapsible Panel
In this tutorial we will be learning how to create a collapsible panel or sidebar and an expandable content area. jQuery will be assisting us to create this smooth and sleek behaviour. Once our panel is hidden, we will display a small button to reveal it again.
demo

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 Tabs made easy
small jQuery dependant code to create my own tabs widget and thought you could find it useful.

Tables and Data Handling

Simple tableSorter
Addes a simpel tableSorter with the default properties. Click on the header to start sorting.

Demo

Quick Search
jQuery quickSearch plug-in.
Demo

DataTables
DataTables is a plug-in 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 tables. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Fully internationalisable: UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
  • It’s free!

Zebra Tables Demo
Using jQuery to do zebra striping and row hovering

Utilities

jQuery.fn.map enhancement
It allows you to pass a string to $(collection).map(...) instead of a function; it’s useful for returning attributes, DOM properties, CSS styles or data tied to each element without having to spend time/space writing a function, e.g.

Satisfy that selector!
Satisfy is a development-only script that you can use to quickly generate HTML for testing/debugging. The idea is that you provide a CSS selector and then the plugin will “satisfy” it by generating an HTML structure in accordance with that selector.

Beginners Guide to jQuery Mouse Events
If you’re just starting out in jQuery, one of the most important things is to learn to make things interactive. This tutorial will show the basics of working with the mouse in jQuery.

Books on jQuery

A good way to learn new stuff or get into more details of a already well known area is to get yourself a good book.

-->