jQuery UI iPhone-like Switch Button Demo

This widget will replace the receiver element with an iPhone-style switch button with two states: "on" and "off". Labels of the states are customizable, as are their presence and position. The receiver element's "checked" attribute is updated according to the state of the switch, so that it can be used in a <form>, on a checkbox input for instance.

This widget has been made to answer my specific needs, so there's room for improvement here and there, but it does the job for me as it is.

Basic usage

Using the following markup:

<input type="checkbox" value="1" checked>

You can simply call switchButton() without any options on the checkbox element, and you'll get that:

The widget's elements are floated, so you must wrap the checkbox in its own <div> if you want to inline it with some text:

It is
<div class="switch-wrapper">
  <input type="checkbox" value="1" checked>
</div>
!

Apply some styles to the wrapping <div> and everything will look perfect:

.switch-wrapper {
  display: inline-block;
  position: relative;
  top: 3px;
}

Playing with options

Labels texts

The first thing you might want to do, is changing the labels texts. The on_label and off_label options allow you to do that:

$("input[type=checkbox]").switchButton({
  on_label: 'yes',
  off_label: 'no'
});

Default state

The widget will use the checked attribute of the receiver to determine the initial state of the switch.
However, you can force it to be on or off by specifying it in the options:

// Force the checked property to false, whatever state it is in initially
$("input[type=checkbox]").switchButton({
  checked: false
});

Other labels options

Maybe you'd like to display the button without any label at all:

$("input[type=checkbox]").switchButton({
  show_labels: false
});

Or display them on one side only:

$("input[type=checkbox]").switchButton({
  labels_placement: "right"
});

$("input[type=checkbox]").switchButton({
  labels_placement: "left"
});

Slider options

You can customize the size of the slider and the sliding element:

$("input[type=checkbox]").switchButton({
  width: 100,
  height: 40,
  button_width: 50
});

$("input[type=checkbox]").switchButton({
  width: 100,
  height: 40,
  button_width: 70
});

Note that the font-size of the labels for both examples above have been changed in the CSS.