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.

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.

Demo: http://jqr.github.com/2009/08/05/iphone-toggle-switches.html
Download: git://github.com/tdreyno/iphone-style-checkboxes.git
Source: http://jqr.github.com/2009/08/05/iphone-toggle-switches.html

Related Listings:

1. iPhone Style Checkboxes Progressively enhance your forms by turning boring old checkboxes into...
2. iPhone Checkboxes Using MooTools One of the sweet user interface enhancements provided by Apple’s...
3. Row checkbox toggle using Jquery So since I’ve been playing with jQuery on my spare...
4. iPhone Interface in Javascript This script can generate and embed Iphone like interface on...
5. Prototype – Javascript Framework Prototype is a JavaScript Framework that aims to ease development...

Do you like this post?

Email: