jquery-goodies

jquery-goodies is a collection of useful jquery extensions that change the behavior of HTML elements simply by applying a CSS class.
Go to the project’s demo page on heroku: jquery-goodies (also available under test/jquery-goodies-test.html) to see an example of each goodie to play with.

DragToShare:

<img class='DragToShare' src='images/banner.jpg'>

Add a ‘DragToShare’ class to your image and then drag it to share the link to the current page to twitter, facebook or delicious. You’ll need to include stylesheet, an image and the following HTML code:

<ul id='targets'>
  <li id='twitter'>
    <a href='http://twitter.com'></a>
  </li>
  <li id='delicious'>
    <a href='http://delicious.com'></a>
  </li>
  <li id='facebook'>
    <a href='http://facebook.com'></a>
  </li>
</ul>

Facebook-style tooltip

Add an attribute ‘data-tooltip’ to your input field to display a nice tooltip as you type. Stylesheet and an image are required as well.

<input type="text" data-tooltip="input your email"/>

Example of the javascript call:

$('*[data-tooltip]').tipsy({trigger: 'focus', gravity: 'w'});

See different parameters of the tipsy plugin if you need to further customize the look-and-feel of your tooltip: Tipsy homepage

ClearOnClick

Adding a class ‘ClearOnClick’ lets you clear input or textarea elements from default text on focusing.

<textarea class="ClearOnClick"></textarea>

Example of the javascript call:

$('.ClearOnClick').clearOnClick({text: 'Click me'});

AutoResizable

Adding autoResize functionality to textareas with ‘AutoResizable’ class.

Example of the javascript call:

$('textarea.AutoResizable').autoResize({

  onResize : function() {
    $(this).css({opacity:0.8});
  },

  animateCallback : function() {
    $(this).css({opacity:1});
  },

  animateDuration : 300,
  extraSpace : 20
});

Exclusive Checkboxes

If you really don’t want to use radio buttons – group the checkboxes together and from the group at most 1 of them will get checked.

For the HTML below:

<div class="ExclusiveCheckboxes">
  <input id="first-checkbox"  type="checkbox" />
  <input id="second-checkbox" type="checkbox" />
  <input id="third-checkbox"  type="checkbox" />
</div>

example of the javascript call:

$('.ExclusiveCheckboxes :checkbox').checkMaxOne();

Testing

Go to the project’s demo page jquery-goodies to see the functionality tested using QUnit and the jquery-simulate plugin that lets you simulate drag-and-drop or sortable behavior.