50 Plugins jQuery útiles (selección 2011)
Estamos a un cachito de terminar el año y en Proyecto Aurora nos hemos propuesto pasarnos horas navegando (la verdad como siempre) para buscarles los mejores recursos de diseño y desarrollo web que les puedan ser útiles en sus trabajos o proyectos, con esa finalidad estamos publicando las mejores selecciones o recopilaciones de 2011.
Form & Validation Plugins
Plugins for Responsive Layouts
Sliders, Galleries & Carousels
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
rlightbox is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.
This plugin is a circular content carousel. You’ll have some content boxes that can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now you can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
Circular Content CarouselDemo →
Modal Window Plugins
Mobile Specific Plugins
Overscroll is a jQuery plugin that mimics the iPhone/iPad scrolling experience in a browser. The plugin adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’. Runs on most modern browsers.
jQuery Mobile is a touch-optimized web framework for smartphones and tablets. It has a unified, HTML5-based user interface system for all popular mobile device platforms. IT’s built on the rock-solid jQuery and jQuery UI foundation. It’s lightweight code is built with progressive enhancement, and it has a flexible, easily theme-able design.
jQuery MobileDemo →
jQuery.fracs determines the fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.
FitText is a jQuery plugin for inflating web type. 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.
A short tutorial for making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.
Shuffle Letters EffectDemo →
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content.
And… all the rest
ComboGrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. ComboGrid provides keyboard navigation support for selecting an item.
jQuery ComboGrid PluginDemo →
grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.
jQuery Timelinr is a simple plugin helps you to give more life to the boring timelines. It supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.
jQuery TimelinrDemo →
deck.js is a tool for making modern HTML presentations. Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state looks like and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don’t.
spin.js is an animated CSS3 loading spinner. You can adjust every single parameter: number of lines, length and width of lines, radius, trail, speed of spinning, and whether there’s a shadow or not.
jquip is a stripped down, faster, more modular – include only the parts you want – of jQuery. It is only 4.28KB (minified and gzipped) meaning it is only 13% of jQuerys actual size, yet has 90% of the really useful parts of jQuery (the rest can be added with plugins as needed).
You can also build customizable jquip packages with the new jQuip Library Builder service.
CodeExplorer is an online code explorer that displays code as an entire folder structure. This plugin allows for different themes, multiple instances, fullscreen mode, github connections, and much more.
As the name says, jQuery Boilerplate is a boilerplate for jump-starting jQuery plugins development. This project won’t seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
jQuery BoilerplateDemo →
jQuery Plugin Boilerplate is another boilerplate for jump-starting jQuery plugins development. It contains lots of comments to help you get going easily. It is truly object-oriented, and it implements public and private methods as well as public and private properties, making it the ideal candidate for when building both simple and complex jQuery plugins.
jQuery Plugin BoilerplateDemo →