10 Best jQuery Plugins for UI Customization in 2010
It's really incredible what jQuery has done for improving Web design over the past few years. As an interactive developer I have tried and tested countless jQuery plugins in my projects, (I've created a few of my own too!). This is not just another blog post of all the cool new jQuery plugins out there, rather, it's an attempt to roundup my favorite tools that have performed the most reliably and provide the greatest level of flexibility and customization from a development perspective.
1.) BeautyTips
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips associated with a html element on the page. The thing I like best about BeautyTips is it's limmitless ways to configure the look and feel and event triggering behavior. For example, with BeautyTips it would be relatively easy to match the tooltips used on popular websites like Netflix, Google Maps, Hulu, or Facebook. Because triggering the tooltip is so flexible, you can effectively use the tooltip as a second layer of interaction, making your interface much more dynamic and useable. Excellent documentation, code comments, and demo page as well. BeautyTips can handle dynamic content via Ajax and integrates seamlessly with Hoverintent, another fantastic jQuery plugin.
2.) Cycle
I can't think of a better plugin to rotate content than jquery.cycle. I've used this simple plugin on countless projects large and small because it's fast, lightweight, and bomb proof.
Cycle features include:
- Manual & auto advance
- Pager
- Ability to rotate any HTML content
- Many different transition and easing effects
3.) SimpleModal
SimpleModal is a lightweight jQuery plugin that provides a simple interface for creating a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.
4.) Quicksand
Filtering and sorting content doesn't really get much cooler than this. Quicksand aims to provide a Mac application-like effect to users on the Web. At the very basic level, Quicksand replaces one collection of items with another. New elements will appear with fancy scaling+alpha effect, deleted elements (non-existant in destination collection) will scale out and rearranged items will move to their destination positions.The plugin can sort and filter content manually or via Ajax. Quicksand is currrently being used on the portfolio views on chromaloop.com.
5.) Pines Notify
Pines Notify is a simple notification plugin designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It uses the jQuery UI CSS library for styling, which means it is fully and easily themeable. Try out some of the ready-made themes using the selector on the demo page. There are dozens of customization features available including:
- Supports dynamically updating text, title, icon, type...
- Stacks allow notice sets to stack independently.
- Supports HTML (including forms) in title and text.
- Variable opacity.
- Supports custom classes for individual notice styling.
6.) ScrollTo
A small, customizable plugin for scrolling elements, or the window itself. Most popular use is to use ScrollTo with a "Back to top" link near the bottom of the page, or in an anchored link. It's a great effect that's less jarring to the user than if you simply let the browser jump to the anchor location.
7.) Colorbox
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4.
- Supports photos, grouping, slideshow, ajax, inline, and iframed content.
- Lightweight: less than 9KB of JavaScript.
- Appearance is controlled through CSS so users can restyle the box.
- Behavior settings can be over-written without altering the ColorBox javascript file.
- Can be extended with callbacks & event-hooks without altering the source files.
- Preloads background images and can preload upcoming images in a photo group.
8.) MB Extruder
This jquery component let you easly build a sliding panel where to insert any kind of content; it has builtin all the functionalities for managing menu lines and sub panels with accordion effect. It can get the content via ajax and therefore you can dynamically build it by passing DATA via request using the metadata attribute settable on the extruder container.
9.) BubbleUp
With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation.
10.) Imageless Buttons
This jQuery plugin is an attempt to recreate Google's imageless buttons and prove that it doesn't take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. Buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.
Conclusion
Thanks to all of the amazing developers represented in this collection of plugins that have paved the way for other frontend designers to be successful in their Web projects. By developing useful jQuery plugins, you can take an active roll in the coding community and elevate your skills as a programmer simultaneously. If you're interested in learning more about plugin development, you should take a look at these resources to get started:
Speak your mind
1Comments