20个你要知道的jQuery插件

HTML5 Placeholder jQuery Plugin

jQuery plugin that enables HTML5 placeholder support for legacy browsers.

The HTML5 placeholder attribute is awesome, unfortunately only supported by some browsers. This plugin replicates the placeholder behavior for unsupported browsers.

Compatibility:  HTML5 Placeholder
Firefox: 3.7+, Safari: 4.0+ and Chrome 4.0+

Compatibility: jQuery Placeholder
IE: 6+, Firefox: 3+, Safari: 3.0+, Chrome, Opera, iPhone and Android

Requirements: jQuery
Demo: http://webcloud.se/code/jQuery-Placeholder/
D ownload: http://github.com/danielstocks/jQuery-Placeholder/archives/master

Photobooth: Webcam Photo Shoot Upload with PHP, jQuery and CSS3

 

Photobooth will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

You can use this app as a fun addition to a community forum or other social networking website. You can optionally build in a comment field to go with the photo, or integrate it more deeply with your site.

Requirement: jQuery & PHP
Demo: http://demo.tutorialzine.com/2011/04/jquery-webcam-photobooth/
Download: http://demo.tutorialzine.com/2011/04/jquery-webcam-photobooth/

jquery-ahm: A Better Way To AJAX Requests – Light-Weight jQuery Plugin

jQuery-ahm is a tiny (~1kb) jQuery plugin which enables us to create Ajax requests with a smaller code piece.

It is actually a wrapper around the popular $.ajax method and brings a different way of handling callbacks.

Rather than creating custom callbacks for every Ajax request, jQuery-ahm lets the back-end define Ajax callbacks (handled automatically).

jquery-ahm is a replacement for $.ajax. With $.ajax, every ajax request needs a callback, resulting in a lot of javascript. $.ahm reduces javascript code by letting the response data define the actual callbacks.

Features

• Super light-weight: ~1KB minified
• Reduces ajax requests to one-line (including ajax form validation)
• No more custom callbacks for every ajax request
• Lets back-end define post ajax callbacks (applied automagically)
• Supports all jquery + custom callbacks in back-end code
• Drop in replacement for $.ajax() (supports all $.ajax options)

Here is an example where all the callback is handled on the server-side:

The bad part is, you move the front-end code and functionality to the server-side. This is not a preferred method for many designers/developers and it is mostly difficult if the front and back-end developers are different persons.
And the nice part is, size of the front-end code can be decreased seriously, specially for websites with lots of Ajax interactions and you get lots of flexibility in managing the callbacks.

Requirements: jQuery
Website: http://www.jqueryahm.com/
Demo: http://www.jqueryahm.com/examples
Download: http://www.jqueryahm.com/download

Slider Kit – Multiple Contents Slideshow

 

Slider Kit is a very flexible jQuery plugin that enables us to create almost any type of slideshows like photo galleries, news sliders, carousels and more.

It is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one light and flexible plugin combined with ready-to-use CSS skins.

It has support for both horizontal + vertical sliders and items can be navigated via buttons, mousewheel, image click or keyboard.

There are lots of options provided like auto-start being on/off, animation types, navigation being an infinite loop or not, starting position of the slideshow and much more.

The complete skin of the slideshows can be customized with CSS and the plugin weights only ~8kb (minified).

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://www.kyrielles.net/sliderkit/
Demos:

• Photos sliders
• Photos galleries
• News sliders
• Carousels
• Slideshows
• Tabs menus
• Menus

Download:http://code.google.com/p/sliderkit/downloads/list

Shutter Effect Photography Portfolio with jQuery and HTML5 Canvas

Shutter effect will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

The canvas element is a special area on which you can draw with JavaScript and apply all sorts of manipulations to your image. However, there are limitations to what can be done with it. Generating complex real-time animations is challenging, as you have to redraw the canvas on every frame.

This requires a lot of processing power that web browsers just cannot provide currently, and as a result smooth animations are nearly impossible. But there is a way around this limitation. If you’ve played around with the demo, you’ve noticed how smooth it runs. This is because the frames are generated ahead of time and each one is built as a separate canvas element.

Download Shutter Effect jQuery Plugin

Requirement: jQuery and HTML5
Demo: http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/
Download: http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/jquery.shutter.zip
Website: http://tutorialzine.com/2011/03/photography-portfolio-shutter-effect/

jQuery Mega Drop Down Menu Plugin

jQuery Mega Drop Down Menu plugin for jQuery to create mega drop down menu. The Mega Drop Down Menu plugin takes standard nested lists and turns them into horizontal mega menus. A mega menu has several advantages over standard drop down menus, including:

• All options visible at the same time
• No scrolling and tricky mouse manoeuvres to see sub-menus fly out
• Using standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists. To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:


jQuery(document).ready(function($) {
jQuery('#mega-menu').dcMegaMenu();
});

The download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.

Download jQuery Mega Drop Down Menu

Requirements: jQuery framework, hoverIntent plugin
Demo: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
Download: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/
Website: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

HTML5 Canvas Manage Javascript Library-jCanvaScript

jCanvaScript is a javasript library that provides you methods to manage with the content of a HTML5 canvas element easily. It runs on any platform (including iPhone, iPad, Android) that supports canvas and JavaScript. To add support for canvas in Internet Explorer you can use ExCanvas.

The library is completely object-oriented and besides the canvas context, it provides access to mouse/keyboard events, drag ‘n’ drop and object animation.

Creating new objects is very straightforward with various built-in objects like .circle(), .rect(), .image(), and much more.

Also, there is a huge set of functions that can complete almost any possible action within a single line.

jCanvaScript is very well documented and comes with examples for every feature.

Download jCanvaScript Javascript Library

Requirements: No Requirements
Compatibility: All Modern Browsers
Website:http://jcscript.com/
Download:https://github.com/apsavin/jCanvaScript

jQuery Form Framework To Create Web Forms – jFormer

jFormer Creating a well-functioning jquery form framework, how simple or complicated it is, requires a serious effort as it has various ingredients including (cross-browser) design, validation, and usability.

is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that:

• Validate client-side
• Validate server-side
• Process without changing pages (using AJAX)

jFormer Fatures

• Painless form validation
• Easily customizable using CSS
• User controlled field duplication
• Bot prevention (no need for CAPTCHAs)
• Users can save and resume forms
• Form triggers lock or unlock form fields
• One file for form generation and processing
• Templates for common forms

It enables us to build forms which are validated on client-side and server-side (PHP solution is included) with Ajax requests where users are notified in a very chic way with tooltips and CSS-styling on every level.

The framework has advanced features like cloning forms and/or form fields, dividing a form into pages, creating dependencies and much more.

Default styles for every part of a form is already included and they can be customized/improved further quickly with CSS.

jFormer jQuery Form Framework

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://www.jformer.com/
Demo:http://www.jformer.com/demos/
Download:http://www.jformer.com/download/

jQuery Plugin To Display Password Strength: Naked Password

Naked Password is a jQuery plugin which helps  to display password strength, in a fun way. With a single-line-function, it adds a notification to any password field where a pixelated-lady gets naked according to the password entered.

The whole idea of naked password is to encourage your users to enter stronger passwords. Our beautiful model Sally tastefully removes items of clothing as the password grows stronger.

A very good thing about how the plugin functions is that itdoesn’t require that much of an extra space to notify users. So, it can fit to many live forms without breaking anything.

Also, the images displayed can be changed with any others if you prefer to keep the site not-naked : ).

Download jQuery Plugin “Naked Password”

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.nakedpassword.com/
Download: http://github.com/platform45/nakedpassword

jQuery Page Layout Manager with jQuery UI widgets: UI.Layout

UI.Layout is a jQuery plugin for creating almost any type ofdesktop-like user interfaces with menus, status bars, toolbars and more. The panels created are totally customizable. They are collapsable, hidable, resizable and slidable.

Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations or issues – this widget is ready for production use.

Every panel can have its own headers/footers, can be managed with the help of hotkeys and any HTML element can be used inside them.

There are callbacks provided on every level and lots of methods exist for a complete control.

It can also work with jQuery UI components in harmonyto create totally advanced layouts.

Download jQuery Plugin: UI.Layout

Requirements: jQuery & jQuery UI
Compatibility: All Major Browsers
Website: http://layout.jquery-dev.net/
Demo: http://layout.jquery-dev.net/demos.cfm
Download: http://layout.jquery-dev.net/downloads.cfm

Download jQuery Component Library:Amplify

Amplify is a set of jquery components library to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources. Amplify’s store component handles persistent client-side storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers. Amplify’s request adds some additional features to jQuery’s ajax method while abstracting away the underlying data source.

Download jQuery Component Library

Requirements: jQuery Framework
Demo: http://amplifyjs.com/
Download: http://pub.a2cdn.net/amplify/amplify-1.0a1.zip
Website: http://amplifyjs.com/
License: MIT, GPL License

jQuery Plugin For Creating Magical Layouts – Isotope

Isotope is an impressive jQuery plugin that enables us tosort items and create smart layouts. Using the plugin, any given list of items can be filtered with show/hide effects and they can be re-ordered with slick animations.

The plugin’s layout features are very powerful as well. With a simple function, items can be converted into horizontal/vertical layouts or arranged intelligently within a grid and much more. And, all with nice animations.

Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but falls back to JavaScript animation when they are not available.

Download jQuery Plugin For Creating Magical Layouts

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://isotope.metafizzy.co/
Demo: http://isotope.metafizzy.co/demos/basic.html
Download: http://isotope.metafizzy.co/jquery.isotope.min.js

jQuery Plugin: zClip lightweight jQuery “copy to clipboard” Plugin

zClip is a lightweight jQuery “copy to clipboard” plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below. zClip is a jQuery plugin for creating a “copy to clipboard” functionality with the help of an invisible Flash Movie.

jQuery Plugin zClip Features:

• Compatible with Flash 10
• Avoids built in browser security conflicts by using a 3rd party browser plugin (Adobe Flash)
• Invisible overlay, no interference with page design
• Support for CSS “:hover” and “:active” states
• Preserves the targeted element’s “click” “mouseenter” and “mouseleave” events
• Supplies callback functions for “before copy” and “after copy”
• Extremely light weight! (~7KB minified)

Download zClip “copy to clipborad” jQuery Plugin:

Requirements: jQuery & ZeroClipboard.swf file
Compatibility: Flash 10 and below
Website:http://www.steamdev.com/zclip/
Download:http://www.steamdev.com/zclip/js/jquery.zclip.js

jShowOff: A jQuery Content Rotator – jQuery Plugin

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

jQuery HTML Content Rotator Plugin Preview:

The output is fully customizable with options provided for setting auto play on/off, speed of the transitions, controls on/off, effects and more.

Features

• Option to show slides randomly.

Items in the rotator can be navigated with the help of a pagination, prev-next buttons and/or thumbnails (where all are optional.)

License

jShowOff is free for personal and commercial use under the MIT/GPL license used by the jQuery core libraries. Donations are appreciated, but not required (see ‘Donate’ button on the right).

Download jQuery Content Rotator Plugin

Requirements: jQuery
Compatibility: All Major Browsers
Website:http://ekallevig.com/jshowoff/
Download:http://github.com/ekallevig/jShowOff

Quick & Easy Zooming With jQuery – Zoomy

Zoomy is simple. Zoomy is easy to implement and customize.Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image. Most CMS systems save or create multiple sizes of an image so its easy to set up. Just link the zoom picture on the display picture, and tell the plugin to use that link when zooming. It takes only a little bit of scripting. Zoomy is a very easy-to-implement jQuery plugin which helps creating zoom-to-image functionality.

Image Zooming Preview:

Besides the thumbnail, It requires a bigger size of an imageto display the part being zoomed.

It comes with several options like the zoom size, whether it’ll be rounded or not and image being clickable or not.

There is also a nice loader being displayed while waiting for the zoom to load.

Requirement: jQuery
Download:http://redeyeoperations.com/plugins/zoomy/zoomy0.5.zip

jQuery Upload/Crop Image: Upload & Crop Image With PHP & jQuery

jQuery upload/crop image tool use for upload and crop different types of images, JPG, GIFs and PNG and you can now upload images and have a random file name (this fixes the caching issue some of you have had) you need “Image Area Select” plugin.

What we needed was a way to upload a JPG image, resize it if required then crop it to given height and width.

1. Firstly we created a form to allow us to upload an image. Pretty basic, nothing flashy there.

2. Capture, rename and resize the uploaded file. (We also provided a set name for the uploaded file.)

3. Now that the image has been uploaded and saved to our folder we can use the “Image Area Select” plugin to crop our image.

It basically provides the coordinates to the server to handle the crop.

• x1, y1 = coordinates of the top left corner of the initial selection area
• x2, y2 = coordinates of the bottom right corner of the initial selection area
• width = crop selection width
• height = crop selection height

There are a number of options with this plugin which you can see using the link above. We opted for an aspect ratio of 1:1 (height and width of 100px) along with a preview of what we are actually going to crop.

Download jQuery Upload/Crop Image

Requirement: jQuery, PHP & PHP  GD Library
Demo:http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
Download:http://www.webmotionuk.co.uk/jquery/jquery_upload_crop.zip

jQuery UI Elements Kit For Websites & Web App – Wijmo

jQuery UI elements kit for websites & web application on planet Earth. We call the new element “Wijmo”. Wijmo is a complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5 that, when combined, become an unstoppable force on the web.

A Complete Kit of jQuery UI Widgets

• Everything you need to build killer web apps including grid, charts, menus and more.
• Built on jQuery UI Widget Factory.
• Completely ThemeRoller-ready, including a custom Aristo theme.
• Fully supported with forums, documentation and tech support.

Wijmo Complete is designed for individuals or businesses that want to purchase a complete kit of jQuery UI Widgets. It includes everything in Wijmo Open in addition to more complex and powerful widgets. Wijmo Complete is licensed per developer under the Wijmo Commercial License.

Wijmo jQuery Menu Element Preview:

Wijmo jQuery Tooltip Element Preview:

Download jQuery UI Element Kit – Wijmo

Requirement: jQuery
Website: http://wijmo.com
Demo: http://wijmo.com/demos/
Download: http://wijmo.com/get/Wijmo.1.0.1.zip

ProcessWire: PHP CMS + Framework With jQuery

ProcessWire is an open source content management system (CMS) and web application framework aimed at the needs of designers, developers and their clients. ProcessWire gives you more control over your fields, templates and markup than other platforms, and provides a powerful template system that works the way you do. Not to mention,ProcessWire’s API makes working with your content easy and enjoyable. Managing and developing a site in ProcessWire is shockingly simple compared to what you may be used to.

The application has a very low learning curve as there is no complexity and it is pretty developer/designer friendly considering it’s built to adapt to your way of doing things.

With the help of a jQuery-inspired API (a big “plus” for jQuery fans), it gives you the tools to reach data, but you make the markup.

Anything can be built with ProcessWire as all page fields in it are custom fields. It’s easy to edit, add, sort or remove fields from pages (via templates) as you see fit.

And, for maximum flexibility, fields can be as simple as containing raw text or numbers, or more complex like rich text editors, page-to-page relations and fields that hold files or images.

The application is friendly for end-users too as no details other than the “things-to-done” are displayed.

It has a modular plugin architecture for extending functionality and a must-check for any designer/developer (specially jQuery users).

Requirements: PHP 5.2.4+, MySQL 5.0.15+
Website: http://www.processwire.com/
Demo: http://processwire.com/demo/
Download: https://github.com/ryancramerdesign/ProcessWire

jRating – Flexible jQuery Ajax Rating Plugin

jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”. There is also an option to display small or big stars and images can be changed with any other file easily.

Although the plugin can be used with any scripting language,a PHP file that handles the requests is already included in the download package.

Rating Preview

Download jRating jQuery Rating Plugin

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.myjqueryplugins.com/jRating
Demo: http://www.myjqueryplugins.com/jRating/demo
Download: http://www.myjqueryplugins.com/jRating/download

The-M-Project: HTML5 Javascript Framework For Cross-Platform Mobile Apps

The-M-Project contains all UI and Core files to build jQuery Mobile based mobile HTML5 Apps. The-M-Project is an exciting HTML5 JavaScript framework for building cross-platform mobile web apps (iOS, Android, Palm webOS, BlackBerry). It makes use of jQuery on the JavaScript part and contains all ui + core files with features like offline support, internationalization and more.

The-M-Project is not alone, it requires nodeJS and comes with a build tool called: Espresso! which makes it easy to structure your code, build and run it on a built-in server.

Although the framework is in alpha stage, it is already well-documented and comes with multiple downloadable examples.

The-M-Project Features: