Aug
05
From the lab: iToggle for jQuery
…written by Will and has 12 comments so far
For a little challenge the other day we decided to see how closely we could re-create the iPhone’s toggle switches on the web. Into the labs we went, and the result was a brand new plugin!
Using just one image, some simple CSS, almost no HTML and a compact bit of Javascript (3kb) we’ve forged this little plugin to replace those boring checkboxes and radio buttons with something far more fancy looking!
With the help of jQuery this plugin will replace any checkbox or radio element you want with this sliding alternative.
Head over to the labs page for an in depth explanation and links to download the files, including a PSD template. Questions or examples of iToggle in action? let us know below!
Petoz Says:
hi I download it and make some try but don’t work on “onclick” or better, the value don’t change.
any hints or example to use it like a input button ?
many thanks in advance
Petoz
August 20th, 2009 at 11:27 amAmit Singh Says:
Excellent peice of work!!! I was just wondering if you had any hints on how to make it work within a gridview? I can’t seem to get the image to render. The gridview is bound on the pageload, however I don’t think that should be a problem.
The checkbox works perfectly outside the gridview. Any tips would be much appreciated.
October 23rd, 2009 at 4:23 amr4 Says:
The source of the plugin has this in the header:
jQuery Last.Fm Plugin by Engage Interactive
You might want to change that to … well, “iToggle” or something, eh?
November 6th, 2009 at 5:29 amWill Says:
Hey,
November 6th, 2009 at 9:36 amI’ve had a look through the zip and the actual files on the site, but I can’t find that anywhere… Not to worry though, I’m sure people can figure it out :p
Thanks though,
Will
Sven Says:
Hello
I have question
I try your code and it’s works fine except i cant get to change value of checkbox or radio
i try to place some code into onclick but without success
anyone figure this out
any working sample will be nice
January 28th, 2010 at 3:57 pmSigfrid Says:
Hello guys,
February 10th, 2010 at 3:08 amyou should specify in the documentation that everything must be inside a div with itoggle as id otherwise it doesn’t work. I spent almost 1 hour to figure it out.
Will Says:
Hi Sigfrid,
February 10th, 2010 at 9:46 amYou don’t actually have to, that’s just the example I used. You can target any containing div using the jQuery selector engine. For example: #form_1 div.iToggle would work, as would: #form_2 div.i_toggle
Will
mas iQ Says:
please I can not make itoggle sample to work,
February 12th, 2010 at 12:27 amis there any zip file contains of working html version ?
Will Says:
Hi Mas,
February 12th, 2010 at 9:48 amIf you right click > view source on the labs page there is a working version.
Cheers,
Will
Marc Says:
Hi,
I’ve got the same question as Sven, how do you change the setting of the checkbox/radiobutton dynamically from javascript?
I’ve tried removing the “checked” attribute, but it doesn’t change what’s checked. E.g:
jQuery(“#itoggle #example_1″).removeAttr(“checked”);
or
jQuery(“#example_1″).removeAttr(“checked”);
Also tried sending a click and mousedown event, but that didn’t trigger it either (nor is any of the iToggle callbacks invoked).
Cheers,
March 1st, 2010 at 11:29 amMarc
Hasan Gürsoy Says:
You should write better documentation.
March 8th, 2010 at 9:25 amWill Says:
Hi Hasan Gürsoy,
March 8th, 2010 at 9:38 amI’m sorry if you feel that there isn’t enough documentation, but we use our labs area to put ideas down and share bits of code that we’ve created while working on other projects. They are aimed more at people who have prior knowledge of the subject – in this case jQuery. We simply don’t have time to sit down and write in-depth documentation for people who don’t.
As with the last.fm plugin we hope that people from the web will take interest and advance the plugin themselves, writing proper documentation and making improvements along the way.
Thanks,
Will