Developer News, More

15 Amazing jQuery Plugins Every Developer Should Use

jquery plugins
jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 15 jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing.

15 Amazing jQuery Plugins Every Developer Should Use

Dialogs

The browser’s built-in dialogs are easy to use but are ugly and non-customizable. If you want your application to look sharp and professional, you will have to part with the loathed default look. The plugins in this section can substitute the built-in dialogs and can be readily customized.

1. Alertify.js

Alertify (github) is small library for presenting beautiful dialog windows and notifications. It is easy to customize with CSS, has a simple API and doesn’t depend on third party libraries (but plays nicely with them). To use it, include the js file and call the methods of the global alertify object:

jquery plugins1

alertify

 

2. jQuery Avgrund

jQuery Avgrund (github) is another cool dialog solution. It is not as feature-rich as alertify, but it has the Wow! factor that your web app needs. The dialog is shown with an impressive animation that brings it into focus, while blurring and darkening the background.

Jquery avgrand

 

Forms

Forms are tedious and boring. Everyone hates filling them. It is even a bigger deal if no client-side validation is present and we are forced to enter the data a second time. The plugins in this section attempt to make things better by enhancing your forms with useful functionality.

3. iCheck

iCheck (github) is a jQuery plugin that enhances your form controls. It is perfectly customizable, works on mobile and comes with beautiful flat-style skins. To use it, include the js and css files in your page, and convert all your radio and checkboxes with a few lines of jQuery.
icheck

 

 

4. Long Press

Long Press is a jQuery plugin that eases the writing of accented or rare characters. Holding down a key while typing will bring a bar with alternative characters that you can use. The plugin also has a github page.

long press

 

5. jQuery File Upload

jQuery File Upload (github) is a widget with multiple file selection, drag&drop support, progress bars and preview images. It 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.) and is easy to embed into your application thanks to a number of hooks and callbacks.

jquery file uploaded

 

6. Complexify

Complexify (github) is a jQuery plugin that aims to assess how complex passwords are. You can use it in signup forms to present a percentage to users. With this plugin you can force passwords to contain a combination of upper/lowercase letters, numbers, special symbols and more. I should note that this is purely a client-side solution, which means that it can be circumvented. This is why you should also check the password complexity on the server side.

complexify

 

7. jQuery Knob

jQuery Knob (github) is a plugin for turning input elements into touchable jQuery dials. It is built using canvas, and is fully customizable by setting data attributes on the inputs like this:
The dials can be controlled using the mouse (click and drag; mousewheel), the keyboard, and by using touch on mobile devices.

Jquery knob

 

 

8. Pickadate.js

Pickadate.js (github) is a jQuery plugin that creates a responsive and mobile friendly date selection widget. It is very easy to use and can be customized with CSS. To use it, include the js file and the stylesheet, and call the plugin on your input element:
The plugin takes lots of options which you can find in the docs.

pickadate

 

9. Chosen

Chosen (github) is a powerful widget which converts a select input into a searchable dropdown list. It is easy to customize with CSS, and you can hook your own code thanks to a number of callbacks. The plugin also updates the original element (which is hidden) so that submitting it as a part of a form or reading it with JS will give you the correct result.

chosen

 

10. Fancy Input

Fancy Input (github) is a jQuery plugin that makes entering or deleting text in a textboox uber cool. It uses CSS3 animations to achieve the effect. To use it, simply include the JS file after jQuery, and call the plugin:
Fancy input

 

 

11. Typeahead.js

Typeahead (github) is a fast autocomplete library by twitter. It is inspired by twitter.com’s search box and is full of features. It displays suggestions as users type, and shows the top suggestion as a hint. The plugin works with hardcoded data as well as remote data, and rate-limits network requests to lighten the load.

typeahead

 

12. Parsley.js

Parsley.js (github) is an unobtrusive form validation library. It lets you validate form fields without having to write a single line of JavaScript. Instead, you have to place data attributes in the input fields that you need to be validated, and Parsley handles the rest. The library works with either jQuery or Zepto and is less than 800 lines long.

parsley

 

Page scrolling and Parallax

Single page websites that feature a parallax scrolling effect are popular these days. They will probably stay in fashion for some time, as they are perfect for sites with low information density and lots of photos – marketing sites, portfolios and more. These plugins aim to make them easier to develop.

13. Windows

Windows (github) is a plugin that lets you build single page websites with sections that take up the whole screens. The plugin gives you callbacks that are called when new sections come into visibility and handles snapping, so you can easily extend it with custom navigation menus or more. Here is an example:
windows

 

 

14. Cool Kitten

Cook Kitten (github) is a responsive framework for parallax scrolling websites. It organizes the sections of your site into slides and uses the jQuery Waypoints plugin to detect when they come into visibility, which causes the navigation menu to get updated.

cool kitten

 

15. Sticky

Sticky (github) is a jQuery plugin that gives you the ability to make any element on your page always stay visible when scrolling the page. This can come handy in your single-page website to present a sticky navigation menu or sharing bar. It is straightforward to use, the only option you may pass is a top offset:
sticky

 

 

You Might Also Like