Friday, July 2, 2010

70 Amazing jQuery Plugins with Tutorials

AutoSnippet – Automatic Code Snippet Generator


Generating the code snippet from the source code (HTML, CSS and
Javascript). No more cumbersome repetitive tasks and no more
inconsistencies between example and real code.



Demo


————————————————————————



jQuery Approach


Approach is a jQuery plugin that allows you to animate style
properties based on the cursor’s proximity to an object. It works in a
very similar manner to jQuery animate, however it animates over
distance instead of time.



Demo


—————————————————————-



jQuery Animated Border


Animated borders for any block level element. This plugin creates an animated border with configurable thickness and color.



Demo


——————————————————————-


jQuery CSS Clip Animation Plugin


Here’s a simple jQuery 1.2.6 “plugin” to extend the animate function to support animation of the clip property.



Demo


———————————————————————


Add to Cart


This plugin implements visual effect of adding something to cart
(busket). Visually it’s similar to Microsoft Word post-save visual
effect, when a gray rectangular of page moves down to the toolbar.



Demo


—————————————————————–


animaDrag: Animating Drag and Drop Plugin


animaDrag is an ultra lightweight drag and drop plugin that is
independent of the jQuery UI framework. Although it has fewer features
than the UI draggable library, it is also much smaller. AnimaDrag
allows draggable items to be eased by jQuery animation, which UI
draggables do not allow. This allows for a richer display of the
transition between two locations, with full easing support.



Demo


——————————————————————–



a-tools


Cross-browser text selection and modification plugin built on top of
the jQuery library. Tested with Opera 9.5 (Windows) and Opera 9.6
(Linux), Mozilla Firefox 3.0 (Windows and Linux), Internet Explorer 7,
Chrome 2.0 and Safari 4.0. Also works with jQuery 1.4.



Demo


———————————————————————


jQuery 3 State Switch Plugin


jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that
expresses the selection and some states of list item using radio button
and checkbox at the same time.


The applications of J3SSW includes some interfaces for sort key or filter key of any search results.



Demo


—————————————————————


jQuery Doubleselect Plugin


Fill in a second select box dependent on the first one.



Demo


—————————————————————–


jQuery columnManager plugin


A jQuery-plugin to toggle the visibility of table columns
(collapsing and expanding them) and to save the state until the next
visit.


It’s supporting tables with colspans and rowspans, too!



Demo


———————————————————————-


jqDnR


qDnR is a lightweight plugin for jQuery  that lets you drag, drop, and resize elements.



Demo


——————————————————————


Tablesorter


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. It has many useful features.



Demo


——————————————————————–


jQuery Spoilers Plugin


Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site



Demo


—————————————————————–


PopUpWindow


It allows you to open a popup windows in any size you wish.



Demo


—————————————————————-


Masked Input Plugin


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.



Demo


———————————————————


AJAX Calendar Widget with Optional TimeZone Support


The Any+Time JavaScript Library includes a highly-customizable,
jQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a
powerful Date/String parse/format utility.



Demo


———————————————————-


Video Lightbox – Easily add video to website or blog



Video Lightbox is a jQuery plugin that shows your videos in the page with a nice lightbox-style overlay.



Demo


—————————————————————


jQuery CSS Drop Down Menu Style


CSS UL/LI Drop Down Menu with Palm Pre look-n-feel and LavaLamp effect.



Demo


————————————————————-


A jQuery Notifications Plugin


jNotifica is a jQuery plugin that provides a beautiful and simple
notifications system. It’s usefull for substitute JavaScript alerts.



Demo


————————————————————-


Popin


Create an easy modal window with a automatic ajax request.



Demo


—————————————————————


Javascript Floating Box JQuery Plugin


In may cases, web page contents does not fit into the screen, we
will have scroll down to the page to read whole contents. bu doing so,
we will lose those information on top. This javascript Floating Menu
will do the trick and to keep  specified contents already visible



Demo


—————————————————————-


jQuery – Numeric


Allows only valid characters (i.e. numbers) to be typed into a text
box. Can take negative numbers and a decimal point. You can supply a
callback that runs when focus is lost and the value in the text box is
not a valid number.



Demo


————————————————————-


jQuery plugin: Treeview


Lightweight and flexible transformation of an unordered list into an
expandable and collapsable tree, great for unobtrusive navigation
enhancements. Supports both location and cookie based persistence.



Demo


—————————————————————–


jQuery Autocomplete Plugin


Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.


By giving an autocompleted field focus or entering something into
it, the plugin starts searching for matching entries and displays a
list of values to choose from. By entering more characters, the user
can filter down the list to better matches.



Demo


—————————————————————-



Password Validation


This plugin extends the jQuery validation plugin, providing two components:


* A function that rates passwords for factors like mixed upper/lower
case, mix of characters (digits, special characters), length and
similarity to a username (optional).


* A custom method for the validation plugin that uses the rating
function to display a password strength meter, requiring the field to
have a “good” rating. The text displayed can be localized.



Demo


———————————————————-


jQuery plugin: Prettydate


The plugin provides clientside date formatting in the style of
Twitter’s timeline: “just now”, “5 minutes ago”, “yesterday”, “2 weeks
ago”.



Demo


————————————————————


Accordion


This plugin creates an accordion menu. It works with nested lists,
definition lists, or just nested divs. Options are available to specify
the structure, if necessary, the active element (to display at first)
and to customize animations. The navigation-option automatically
activates a part of the accordion based on the current location (URL)
of the page.



Demo


—————————————————————


jQuery Countable Plugin


A jQuery plugin that adds a character counter to inputs and textareas.



Demo


—————————————————————–


jQuery Live Query Plugin


Live Query utilizes the power of jQuery selectors by binding events
or firing callbacks for matched elements auto-magically, even after the
page has been loaded and the DOM updated.



Demo


—————————————————————–


jQuery Expandable Plugin


A jQuery plugin that auto-expands textareas to fit the contents as a user types.



Demo


—————————————————————–


hoverIntent


hoverIntent is a plug-in that attempts to determine the user’s
intent… like a crystal ball, only with mouse movement! It works like
(and was derived from) jQuery’s built-in hover. However, instead of
immediately calling the onMouseOver function, it waits until the user’s
mouse slows down enough before making the call.



Demo


—————————————————————–


clueTip


The clueTip plugin allows you to easily show a fancy tooltip when
the user’s mouse hovers over (or, optionally, clicks on) any element
you designate in your script. If the element includes a title
attribute, its text becomes the heading of the clueTip.



Demo


——————————————————————-


LoadMask


LoadMask jQuery plugin can mask DOM elements while their content is
loading or changing to prevent user interactions and inform that some
background task is still running. It is very light (~2Kb) and easy to
use.


Demo

PART -2

1.jqPuzzle


jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic.


442.Feature Your Products With Jquery


When you click on a product, the product image will zoom out to see
a featured close-up shot and a description. When you click on another
product, the last opened product will zoom back and the new clicked
product will zoom back and the new clicked product will zoom out.


43







3.Create an Amazing Music Player Using Mouse Gestures & Hotkeys in jQuery 42



4.Create Astonishing iCal-like Calendars With jQuery



41



5.jQuery Image Cube


A jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.40



6.Tooltips



39



7.Fly Off Page


It will take selected elements and make them fly (not literally) off the page in a random or pre-defined direction.38



8.Create a jQuery Popup Bubble


Learn how to add a cool popup bubble to RSS feed link using jQuery.37



9.Simple Page Peel Effect with jQuery & CSS



35



10.Create a Content Rich Tooltip with JSON and jQuery


This tutorial will demonstrate how to
build tooltips that are powered by jQuery, with information pulled from
a JSON array. Here’s a look at the final result that we’ll be looking
to me:34



11.Reel


Reel is a jQuery plugin which takes an
image tag and makes it a live “projection” of pre-built animation
frames sequence. Its aim is to provide a 360° view of something or
someplace. Great alternative to widely used Flash techniques.33.2 33.1





12.Color Changing Text and Backgrounds w/ jQuery


Here’s a quick and easy way to cycle between multiple colors smoothly.32



13.Simply Scroll v1


A jQuery plugin for scrolling a set of images.31



14.Sexy Alert Box


Sexy Alert Box is a “sexy” clon of classic
javascript alert. With a taste to lightbox, it changes the ugly alerts
of dows for more attractive alerts!.30



15.Supersized – Full Screen Background/Slishow jQuery Plugin



29



16.Sexy LightBox


SexyLightBox is a clon, sexier and more lightweight than the classic LightBox.28



17.Jcrop


Jcrop is the quick and easy way to add
image cropping functionality to your web application. It combines the
ease-of-use of a typical jQuery plugin with a powerful cross-platform
DHTML cropping engine that is faithful to familiar desktop graphictions.27



18.Timeago jQuery Plugin


Timeago is a jQuery plugin that makes it
easy to support automatically updating fuzzy timestamps (e.g. “4
minutes aor “about 1 day ago”).26



19.Creating a Virtual jQuery Keyboard


This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from.25



20.A Cool Slider Effect That Stuck To Top Of The Page.



24



21.Creating a Keyboard with CSS and jQuery


The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked.23



22.AnythingZoomer jQuery Plugin


You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuplugin that does it.22



23.jQuery – Horizontal Accordion


This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.20



24.Background-Position Plugin 19



25.jqDock v1.2



Transform a set of images into a Mac-like Dock menu,

horizontal or vertical, with icons thad on rollover!


18.2 18.1





26.jQuery Horizontal Tooltips Menu


A horizontal menu with tooltip that slides
accross the menu panel. It’s a bit similar to lavmp, but in this
script, it displays the caption of the icon menu.17



27.Image Lazy Loader Plugin For jQuery


Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded needed.


16



28.Easy Image Rollover Script With jQuery 15



29.jQuery Effect


A jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds.14



30.Create a Realistic Hover Effect With jQuery 13



31.Masked Gallery


Build your own .png mask and cho your images to slide inside!10



32.Container Plus


This is a useful plug in to build full
featured and fully skinnable containers. The container can be set to
draggable, resizable, collapsable and minimizable.9



33.Ajaxify jQuery Plugin


Ajaxify is a jQuery plugin. it can convert
all links in a web page into an ajax load and submit requests. with
this ultra weight plugin, you can build a complex ajax website with one
line.8



34.Seek Attention


The “seekAttention” plugin gracefully
get’s your users attention by fading out a definable area but leaving
the target element (the element which is seeking attention) un-faded
and thereocusing the users attention on it.7



35.Create Simple Tooltips With CSS and jQuery



6



36.S3 Slider jQuery



5



37.The Sexy Curls jQuery Plugin


Sexy Curls jQuery Plugin is an open-source jQuery plugin by Elliott Kember

which lets you share in the be page fold.4



38.JQZoom


JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.3



39.jParallax


jParallax turns a selected element into a
‘window’, or viewport, and all its children into absolutely positioned
layers that can be seen through the viewport. These layers move in
response to the mouse, and, depending on their dimensions (and options
for layer initialisation), they move by different amounts, in a
parallaxd of way.2



40.Fancy Zoom


Designed to view full-size photos and
images inline without requiring a separate web page load, FancyZoom is
providing a smooth, clean, truly Mac-like effect, almost like it’s a
function of Safari itself.




1


No comments:

Popular Posts