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!
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.
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.
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.
A huge thanks to Thomas Reynolds for his development on this awesome plugin and giving me the ability to add these improvements.