Mukesh.in

I found a gud jquery Extender(plugin) on

http://widowmaker.kiev.ua/checkbox/

It was pretty gud (both in ui and functionality) But was lacking in Installation and accessibility.

I have to add many files (CSS and Images ) in web application and they need to be in same folder. In my case the Images shud be in a folder and css in another. So in that case I have to make changes in css(to specify sprite root).

Also the accessibility of the new created wrapper was not gud. they were not accessible by keyboard and also not honoring “Title” attribute if specified . Now the New modified Plugin can do all these things.

Changelist:

1. No need to add CSS files saparately
2. Image root support
3. More Accessibility : Using key board now u can change state by pressing enter or space bar
4. More Accessibility : Title tags are now copied on the wrapper
5. More Easy to use : just add three Images(checkbox.png,safari-checkbox.png,empty.png) in a folder. add JS in any folder and put the refresnce in top of the page and call the function like this

$(document).ready(function()
{
$('input:checkbox').checkbox({root: '/images/jqcheckbox/' });
});
or
$(document).ready(function()
{
$('input:checkbox').checkbox({cls: 'jquery-safari-checkbox',
empty: '/image2/empty.png',
cbPng: "/image1/checkbox.png",
cbSafariPng: "/image3/safari-checkbox.png"});
});

Download Js(jquery.checkbox.js (Modified))

Demo (CheckBox-Demo)

*The code is not fully tested yet. if you found any bug/ suggestion please comment .

———————–Update (april 13 2010)————————–

I have further Extended the plugin now it supports custom labels (Up to 4 chars)
$(document).ready(function()
{
$(' input:checkbox').checkbox({ root: '/jqcheckbox/', showText: true, onText: 'Show', offText: 'Hide'});
});

Demo is updated ;