iPhone Toggle Switches
Way back in June, Thomas Reynolds released iPhone-style-checkboxes for jQuery, a progressive enhancement for checkboxes which makes them into the beautiful iPhone toggle switches. I really like these switches on the iPhone so I went about finishing up his version for the Prototype framework. Of course, I couldn't help but add some new features along the way!
You definitely need to read this article on my site to see all the cool JavaScript effects I'm talking about!
Variable sizes
The initial version supported changing the ON/OFF label text, but if you made the text longer than a few characters, it would be hidden under the handle. I set about making the handle and label sizes automatic based on the actual label text, giving a really nice iphone 4 look to the handle and label.
As a bonus, you can also specify that no automatic resizing should be done and do the control and handle sizing with CSS to make a group of controls uniform.
Draggable
They certainly looked like the iPhone switches, but they didn't feel like them. You could only click them to toggle, we needed to add support for dragging the control.
Sliding labels
A quick check through the network graph revealed Matthijs Langenberg had devised a clever way to slide the labels along with the handle. This was the final piece, now the our JavaScript was nearly indistinguishable from the native iPhone one.
iPhone compatibility
Last but not least, our checkboxes didn't support dragging on the iPhone! Since the iPhone sends out touch events instead of mouse ones, all of our cool dragging code would need to be updated. As of today, both versions of this plugin now fully support the iPhone.
Thanks
A huge thanks to Thomas Reynolds for his development on this awesome plugin and giving me the ability to add these improvements.
Download
The source code is available on GitHub or you can download a zip / tar.gz archive.