jQuery Clickable – Making Your HTML Containers Go “Click Click Boom”!

This is a simple (351 bytes gzipped) jQuery plugin that transforms regular HTML-containers, such as divs, into clickable elements that acts almost as an anchor; with support for status bar information, focus/blur, target (_blank etc.) and more.
This plug-in allow you to create more usable websites, where users will be able to click entire containers instead of just small links.
The setup is easy and users without JavaScript will still be able to use your site.
Installation
Include jQuery and jQuery Clickable in the <head>-element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="JavaScripts/jquery.clickable.min.js"></script>
Demos & Sample Usage
Just call clickable() for default behaviour.
// Short-hand notation for DOM-loaded $(function () { // Default behavior (first child anchor element will be used as target) $('div').clickable(); // You can also specify target anchor $('.make-clickable').clickable('a.clickable-target'); // Settings & configuration, use last child anchor as target $('.red').clickable('a:last', { hoverClass: 'red', changeCursor: false }); });
Source & Download
This plugin is licensed under GPL Version 2.
Did you enjoy this?
Support us by sharing this article with your friends. This way we will be able to produce more content like this, and in the end we are all winners!
PixelTango Original © 2010-08-20 | Usage