David Walsh recently posted a solid list of 7 MooTools Plugins You Should Use on Every Website. Many of his posts use jQuery, but since this one focused on MooTools, I thought I would put up a list of some jQuery plugins that perform similar tasks. This is not a jQuery vs MooTools post — just a list for sites that already use jQuery.
1. autoResize
David makes the case that all textareas should be resizable, and I would have to agree. When text expands past the boundries of a textarea, autoResize will modify the size of the textarea, allowing the user to see all of the content in the box.
2. Custom Checkboxes with jQuery
Though less of a requirement, better looking checkboxes can make a big impact on user experience. The following tutorial shows you how to implement customized checkboxes (and radio controls).
Customize HTML control with jQuery (Checkbox + Radio)
3. FancyBox
Lightbox components are a slick and convenient addition to many sites. You can use the jQuery UI dialog features to create a lightbox, but FancyBox is a cleaner solution designed specifically for use as a lightbox.
4. asmSelect
A jQuery alternative to David’s quickboxes was not easily found. Instead, I offer you a plugin that improves upon the “select multiple” control of the browser.
5. ScrollTo
This plugin allows you to cleanly scroll to a location on the page.
6. qTip
qTip is the full-featured tooltip solution. It includes just about anything you could ever want to do with a tooltip, including media/complex content inside the tooltip, arrows, positioning, and more.
7. Zebra Tables
I am sure that there is an excellent plugin out there that will do this for you, but it seems just as easy to do it yourself.
Setup your styles:
table.zebra tr.odd { background-color: #CCCCCC;}table.zebra tr.hover { background-color: #99FF99;}table.zebra tr.selected { background-color: #9999FF;}after document.ready():
$('table.zebra') // add a class of 'odd' to all the odd rows .find('tr:odd').addClass('odd').end() // add a class of 'even' to all the even rows .find('tr:even').addClass('even').end() .find('tr') // when a row is clicked, give it a class of 'selected' .click(function() { $(this).toggleClass('selected'); }) // when a row is hovered over, give it a class of 'hover' .hover( // over function() { $(this).addClass('hover'); }, // mouse-out function() { $(this).removeClass('hover'); } ).end();
Thanks to David Walsh for the great post and set of tools.