10個新鮮和方便開發的jQuery插件

1.Progression.js

Progression.js是一個jQuery插件，為用戶提供表單提交的實時提示和進度更新。All you have to do is to give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression. Once you have created your form you will need to initiate the plugin.

2. jQuery TourBus

jQuery TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc. Start by including the jQuery plugin and base styles on your page, of course. Then we can define some ‘legs’ of our tour. Imagine you have a page with some stuff you want to lead the user through. You’ll find the basics of the leg styles (padding, background color, etc) which you can either edit or override in your own stylesheets.

3. Mason.js : Dynamic-Colum & Gap Free Grids

Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly. One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid. It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

4. Pop Easy

Pop Easy is a jQuery plugin for quickly creating completely customizable modals. The plugin is lightweight (2kb) and has support for displaying any HTML element, including videos. Regarding the design, the default modal already has a good-looking interface and it can be changed/improved with CSS.

5. Smint : Sticky Menu with Smooth Scroll

Smint is a jQuery plugin that can turn any given element into a sticky menu instantly. Also, the plugin has support for smooth scrolling (which is usually used in one-page websites). The plugin is almost plug ‘n’ play and the only customization provided is “scrolling speed”.

6. FlipClock

FlipClock.js is a jQuery plugin which replicates this effect to present anything related to time. It has support for working as a clock, countdown or timer and can be customized completely with CSS. There is an option for auto-start, multiple methods exist for controlling it (start, stop, getTime, setTime..) with their callbacks.

7. Least.js

Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout. The images are displayed from an unordered list where their order is randomized on each load. Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kinda similar to Google Image search).

8. Unveil : Lightweight Version of Lazy Load

Most of us are familiar with the Lazy Load plugin by Mika Tuupola. This is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport won’t be loaded until the user scrolls to them.
Lazy Load has some cool options such as custom effects, container, events or data attribute. If you’re not going to use any of them you can reduce the file size by leaving just the essential code to show the images. That’s what jQuery Unveil does, it is the lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays – less than 1k.

9. Mmenu : Mobile App like Sliding Menus

jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout. It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization. The options include the position of the menu (left/right), if a counter for the menu items will be displayed or not and more.

10. jQuery Swatches

jQuery.swatches is a free to use that turns a one-line div into a sweet color swatch. You can customize the class as you want. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.