List of jquery plugins
jQuery’s architecture allows developers to create plug-in code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web. Here are the list of some very useful jQuery plugins for web designers and developers.
1. 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 including:
- Multi-column sorting
- Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
- Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via widget system
- Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Small code size
Browser Compatibility:
tablesorter has been tested successfully in the following browsers with Javascript enabled:
- Firefox 2+
- Internet Explorer 6+
- Safari 2+
- Opera 9+
- Konqueror
2. Wookmark
Wookmark is a free jQuery Plugin for creating dynamic and multi column layouts and Infinite Load/Scoll. Pinterest-Like grid Layouts.
Some of options are:
- align – “left”, “right”, or “center”
- autoResize – if “true”, updates layout after browser is resized
- resizeDelay – default is “50”, time in miliseconds between browser resize and layout update
- comparator – a custom sorting function
- container – the width of this element is used to calculate the number of columns, defaults to “window”. For example $(‘myContentGrid’). Container should also have the CSS property “position: relative”.
- direction – “left” or “right”, whether to start in top left or top right corner
- ignoreInactiveItems – if “true”, inactive items will still be visible, which can be used to fade filtered items out
- itemWidth – width of one grid item in pixels (“200”) or percentage (“10%”), defaults to width of first item
- fillEmptySpace – if “true”, creates placeholder at bottom of each column to create an even layout. Placeholders elements have the class “wookmark-placeholder”.
- flexibleWidth – “true” or “false”, adjusts item width to create optimal layout based on browser size
3. NyroModal
NyroModel provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design.
Features
- Ajax Call with targeting content
- Single Image, Images Gallery with arrow navigating
- Gallery with any kind of content
- Form
- Form in iframe
- Form with targeting content
- Form with file upload with targeting content
- Dom Element
- Manual Call
- Stacked Modals
- Many embed element through Embed.ly API / Demos
- Error handling
- Modal will never goes outside the view port
- Esc key to close the window
- Customizable look and animation
- Modal title
- W3C valid HTML (Transitionnal)
4. jQuery Validation
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.
5. 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 table.
Key features:
- Variable length pagination
- On-the-fly filtering
- Multi-column sorting with data type detection
- Smart handling of column widths
- Display data from almost any data source – DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
- Scrolling options for table viewport
- Fully internationalisable
- jQuery UI ThemeRoller support
- Rock solid – backed by a suite of 2900 unit tests
- Wide variety of plug-ins inc. Editor, TableTools, FixedColumns and more
- It’s free!
6. QuickSand
Reorder and filter your items with gorgeous shuffling animation. Mac OS X style.
How it works
- Use plain HTML, like an unordered list.
- Download data by an Ajax call
- Transform HTML items by JavaScript (for example, sort them differently)
7. SparkLines
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.
Features
- Customizable mouseover tooltips and interaction including highlighting of moused-over values.
- Click interaction with moused-over values
- Support for stacked bar charts
- Line charts may not have spot-markers on any/all points
- Flexible colour maps for bar and tristate charts
8. Timeago
Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago” Timeago was originally built for use with Yarp.com to timestamp comments.
Why?
- Avoid timestamps dated “1 minute ago” even though the page was opened 10 minutes ago; timeago refreshes automatically.
- You can take full advantage of page caching in your web applications, because the timestamps aren’t calculated on the server.
- You get to use microformats like the cool kids.
9. FitVids
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
10. Vegas Background jQuery Plugin
Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.
Features
- A powerful Javascript audio library over the HTML5 audio element.
- A jQuery plugin to turn textareas into a markup editor.
- A jQuery plugin to translate content on the fly.
- Face Detection: A jQuery plugin to detect faces in pictures.
11. Backstretch
a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
Features:
- It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes.
- Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site.
- Use it as block-level element
- Streached background as a slideshow
- Attached background to click events
12. Sly
Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.
It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.
Info
- Dependencies: jQuery 1.7+ And that’s it. You don’t need 200KB of jQuery-UI to Sly
In the future, I’d like to drop the jQuery dependency, and transform Sly into a reusable Component. - Compatibility: Sly works in every desktop browser, and due to some divine intervention, even in IE6+, but that is a complete accident. IEs lower than 8 are not officially supported :).
- Mobile: Sly does touch events, and I’m generally trying to make it work everywhere, but the fact is that mobile is not tested.
13. Chosen
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes. Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
Work with
- Standard Select
- Multiple Select
- <optgroup> Support
- Selected and Disabled Support: Chosen automatically highlights selected options and removes disabled options.
- Hide Search on Single Select: The disable_search_threshold option can be specified to hide the search input on single selects if there are fewer than (n) options.
- Default Text Support: Chosen automatically sets the default field text (“Choose a country…”) by reading the select element’s data-placeholder value. If no data-placeholder value is present, it will default to “Select an Option” or “Select Some Options” depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.
- No Results Text Support: Setting the “No results” search text is as easy as passing an option when you create Chosen:
- Limit Selected Options in Multiselect: You can easily limit how many options the user can select:
- Allow Deselect on Single Selects: When a single select box isn’t a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.
- Right to Left Support: Chosen supports right to left select boxes too. just add “chosen-rtl” in addition to “chosen-select” to your select tags and you are good to go.
- Change / Update Events
- Custom Width Support: Using a custom width with Chosen is as easy as passing an option when you create Chosen:
- Labels work, too: Use labels just like you would a standard select
14. Avgrund Modal
Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed.
Features:
- Works with all modern browsers
- Also works with IE 6, IE 7, IE 8
- Tested with jQuery 1.4+
- file size is under 2Kb
15. FitText
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
16. Columnizer
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use!
Features
- Added jQuery 1.6 support
- You can manually specify line breaks for some or all of your columns!
- Optionally prefix all of the CSS classes used by Columnizer to avoid conflicts with your other styles. Use the new `cssClassPrefix` to define the class prefix.
- Fixed an infinite loop in a rare edge case if lastNeverTallest option was set and the content forced the last column to be tallest with dontsplit CSS class
- Fixed an IE crash if “px” was included in the width option
- renamed float option to columnFloat since float is a reserved word
- accuracy (optional) tells columnizer the number of characters to look before splitting between words. smaller is more accurate for column breaks.
- Fixed columnizer removing text nodes if they are immediate children of the columnized node
- Removed hard-coded 3px padding. Columnizer now exactly estimates column widths instead of slightly underestimating widths and adding padding. This change may affect your CSS layout
17. qTip 2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework.
Features:
- Building on 1.0’s user friendly
- provides you with tonnes of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses!
- qTip2 is packed full of features including: Speech bubble tips, Integrated AJAX, Viewport repositioning, z-index stacking, Modal tooltips, Imagemap & SVG support, IE6 support (BGIframe)…and lots more!
- Browser support: Chrome 8+, Firefox 3+, IE 6+, Opera 9+, Safari 2+, iOS 4+
18. jquery cookie
A simple, lightweight jQuery plugin for reading, writing and deleting cookies.
19. Tipsy
tipsy – Facebook-style tooltip plugin for jQuery Overview. Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
Features:
- Gravities Using the gravity parameter, it’s possible to control the positioning of the tooltip relative to the pointee:
- Fading Effects
- You can EVEN COMBINE FADE AND GRAVITY! (exercise for reader)
- Tooltip text can be set based on any attribute, not just title:
- Show/Hide Delay
- Dynamically Updating Text Tipsy tooltips are ‘live’ – if the source attribute’s value changes, the tooltip text will be updated the next time the tooltip is shown. There’s one caveat – if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead (this only applies if you’re using the title attribute).
- Using Tooltips on Form Inputs Tooltips can be bound to form inputs’ focus/blur events using the option {trigger: ‘focus’}:
20. portBox
portBox is a simple, light weight and easy to use modal jQuery plug-in. It was originally built to display completed web design projects with photos of the site, information about the project and what when into completing it, but it works as an everything modal as well. No on page JavaScript required, all you have to do is add the files and markup.
options:
- data-animation [default:fade]
- Sets the entrance animation for the portBox: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer
- Sets the speed of entrance and exit animations, can be set to any numerical value
- Sets whether the portBox should close when the background is clicked or not, set to “true” or “false”
21. jQuery Color Picker Sliders
A jQuery plugin that overhauls the classic color pickers and provides users with a whole new way of selecting desired color codes.
Features:
- Color picker in a popup
- HSL Color Picker
- CIE Lch Color Picker with human perceived lightness
- RGB Color Picker
22. SCEditor
A lightweight WYSIWYG BBCode & HTML editor
Main Options
- toolbar Exclude Comma separated list of commands to exclude from the toolbar. Leave as null to not exclude any.
- locale The locale to use, e.g.: en, en-US, fr, etc.
- charset The charset to use for the WYSIWYG content.
- Emoticons If emoticons should be enabled. Set to false to disable emoticons.
- resizeEnabled If to allow the editor to be resized. If set to true, a small grip will be added to the bottom right-hand corner (bottom left-hand corner in LTR mode) of the editor which allows it to be resized.
- dateFormat Date format to used by the date command. This option will be overridden if the current locale specifies a date format. The words year, month and day will be replaced with the users current year, month and day.
- readOnly If the editor is read only.
- autofocus If to auto focus the editor on page load.
- spellcheck If to enable the browsers built in spell checker. This option is mostly so the built in spell checker can be disabled.
- YoutTube Video support
23. Roundabout
Roundabout is a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable.
Features:
- It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects.
- It works in all major modern browsers and even some of the older, not-so-modern ones.
- Lots of sliding effects.
24. 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.
Features
- Multiple Content Sources: a separate file, via AHAH / AJAX, an element on the same page, typically hidden
- Smart Positioning: The clueTip Plugin has 4 positioning modes, which you can change via the “positionBy” option.
- Flexible Behavior:
- It can be activated on hover or on click.
- It can fade in, slide down, etc.
- It can close when the invoking element is moused out or when the tooltip is moused out or when the user clicks a “close” link.
- It can cache the results of ajax requests—or not.
- Variety of Styles: The clueTip Plugin comes with three themes: default, jTip, and rounded corners. Additional themes can be created by following the naming patterns in the stylesheet, jquery.cluetip.css. To apply one of the alternative themes, just indicate it in the cluetipClass option as ‘jtip’ or ’rounded’.
25. Sticky
Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.
Options
- topSpacing: Pixels between the page top and the element’s top.
- bottomSpacing: Pixels between the page bottom and the element’s bottom.
- className: CSS class added to the element and its wrapper when “sticked”.
- wrapperClassName: CSS class added to the wrapper.
- getWidthFrom: Selector of element referenced to set fixed width of “sticky” element.
26. ChartJS
Chart.js: Easy, object oriented client side graphs for designers and developers.
Features:
- 6 Chart types: Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.
- HTML5 Based: Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.
- Simple and flexible: Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.
Type of charts:
- Line charts: Line graphs are probably the most widely used graph for showing trends. Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.
- Bar charts: Bar graphs are also great at showing trend data. Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.
- Radar charts: Radar charts are good for comparing a selection of different pieces of data. Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you’d expect.
- Pie charts: Pie charts are great at comparing proportions within a single data set. Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.
- Polar area charts: Polar area charts are similar to pie charts, but the variable isn’t the circumference of the segment, but the radius of it. Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.
- Doughnut charts: Similar to pie charts, doughnut charts are great for showing proportional data. Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.
27. Percentage Loader
jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes.
Features:
- HTML 5 canvas
- Using vectors rather than images so can be easily deployed at various sizes
- Controllable: It’s also possible to use the percentage loader as a controller
- Multiple: You can easily run multiple loaders simultaneously.
28. Countdown Timer
When building a coming soon or event page, you find yourself in search for a good way to display the remaining time. A countdown gives the feel of urgency, and combined with an email field will yield more signups for your newsletter.
29. CamanJS
CamanJS is (ca)nvas (man)ipulation in Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques.
CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which continues to grow. It’s completely library independent and works both in NodeJS and the browser.
Features:
- Using CamanJS is extremely simple, but also very flexible.
- Load an Image into a Canvas via URL
- HiDPI Support
- The built-in blending functions are: normal, multiply, screen, overlay, difference, addition, exclusion, softLight, lighten, darken
- Cropping/Resizing CamanJS allows you to crop and resize canvases with ease. This can be done either at initialization time, or later on.
- Actions handle: Brightness, Contrast, Saturation, Vibrance, Exposure, Hue, Sepia, Gamma, Noise, Clip, Sharpen, StackBlur
31. iPicture
iPicture² is an evolution of free iPicture jQuery Plugin. iPicture² creates interactive pictures with extra descriptions, embedded video, links or everything else using javascript and css3.
Features:
- Completely renewed: It’s a new plugin completely redesigned to better perform the task.
- Faster with css3: iPicture uses new css3 features, no extra images for backgrounds and tooltips. jQuery UI agnostic
- Highly customizable: Change your tooltips simply changing css style, choose between presets style or add your own!
- Any content: Now with iPicture² you can insert videos, links or everything else in your tooltips!
32. Tubular
Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.
Options:
- Ratio Control
- Volume control
- Mute
- Play/Pause control
33. Custom Scrollbar
jQuery custom content scroller: Custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via jQuery mousewheel plugin), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and much more.
Features:
- Nested scrollbars
- Scrollbar themes
- Callbacks
- Infinite scroll
- disable/destroy methods
34. Super scroll orama
The jQuery plugin for supercool scroll animation. You can use the updatePin method if you want to change options for pinned elements at runtime. For example when the window size or the size of your pin Item have changed. It Expects the same parameters as the .pin method, except all but the element is optional.
35. Windows
a handy, loosely-coupled jQuery plugin for full-screen scrolling windows
Features:-
- This is a light bootstrap
- The basic SASS for sequential full screen windows
- A jQuery plugin for managing their positions as the user scrolls
- The plugin simply opens up a handy API for position management, provides callbacks, and will allow for window snapping.
- No CSS is applied to the callee.
36. Type Ahead
Twitter typeahead.js is a fast and battle-tested jQuery plugin for auto completion.
Features:-
- Easy to handle
- Light weighted and fast
- Supporting all major browsers
37. Fancy Input
jQuery plugin which basically makes it fun to type text. it works with input fields wrapped with a div, in a way that hides the actual input field (but still “communicates” with it), and put a span element containing the character pressed (in a normal use case), and every span element is being transitioned in a nice CSS3 way. The end result is a mimicked text input field which tries to simulate a real input field as much as possible, including copy, paste, undo and text selection changes.
Features:
- Supports input (type text) and textarea form elements
- Add effects to each letter being typed / deleted
- All effects are highly customizable via CSS
- Default effects are CSS3 hardware accelerated
- Tries to simulates real input / textarea as much as possible
38. jQuery Knob
Nice, downward compatible, touchable, jQuery dial.
Features:-
- Canvas based ; no png or jpg sprites.
- Touch, mouse and mousewheel, keyboard events implemented.
- Downward compatible
- Overloads an input element.
39. jQuery Complexify
Websites have a responsibility to users to accurately tell them how good a password is, and this is not an easy job.
- If your password is 8 characters long and only formed of lower case characters, you need to make it better, perhaps by adding a number or more characters.
- If your password is 25 characters long but happens to not contain a number, you shouldn’t be forced by a password security policy to add one, you clearly have a very secure password.
Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.
40. jQuery File Upload
File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
Notes
- The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
- Only image files (JPG, GIF, PNG) are allowed in this demo (by default there is no file type restriction).
- Uploaded files will be deleted automatically after 5 minutes (demo setting).
- You can drag & drop files from your desktop on this webpage (see Browser support).
- Please refer to the project website and documentation for more information.
- Built with Twitter’s Bootstrap CSS framework and Icons from Glyphicons.
41. Booklet
Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. You can place any sort of html elements inside of your booklet pages. There is no limit to the possibilities you can create. Even using simple options, you can have elaborate displays.
Default Options
- Manual Page Turning
- Keyboard Navigation (use your arrows!)
- Page Numbers
- Shadows (during animation)
42. Lazy Load
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
better website
good site
Hello! I’ve been following your web site for a while now and finally got the
courage to go ahead and give you a shout out from
Kingwood Texas! Just wanted to tell you keep up the excellent
job!