iPhone-Like Toggle Switches With Prototype

Elijah Miller is sharing a very nice script, inspired from the iPhone-style-checkboxes for jQuery by Thomas Reynolds, for creating iPhone-like toggle switches with Prototype.

It is a very flexible resource as:

• variable sizes of switches are created automatically
• has support for dragging
• sliding labels
• offers iPhone compatibility

How To Use It?

It converts the visual output of a checkbox & displays the standard checkbox when JS is disabled (unobtrusive).

To make it work, calling a simple function mentioning the ID of the checkbox & values is enough:

new iPhoneStyle('#variable_size_a_b', { checkedLabel: 'A', uncheckedLabel: 'B' });

That’s all.