jQuery toggle switch button plugin – toggleSwitch

We only need jQuery UI for this! The toggleSwitch – a jQuery toggle switch button plugin, to help us create nice toggle switch buttons easy.

A jQuery toggle switch button plugin – jQuery.UI.toggleSwitch

This toggle plugin was developed for web project, that already run with jQuery UI, so don’t need extra libraries. The toggleSwitch plugin draws upon the theme .ui-slider for the look and feel, and can be applied to select elements with two child options. We can get a nice result quickly:

Sample code:

$(".selector").toggleSwitch({
  highlight: true, // default
  width: 25, // default
  change: function(e) {
    // default null
  },
  stop: function(e,val) {
    // default null
  }
});

The value of the underlying select is updated, so the plugin is form friendly.

Demo:

http://taitems.github.io/UX-Lab/ToggleSwitch/index.html

Read more:

http://taitems.tumblr.com/post/17853682273/jquery-uitoggleswitch-ux-lab-005

GitHub:

https://github.com/taitems/UX-Lab/tree/gh-pages/ToggleSwitch

See also:

“CSS3 Input Styling”

And more stuff from UX-Lab

You may also like:

Awesome Bootstrap checkboxes and radios

Checkbox toggle with Bootstrap

Save form data to local storage with Phoenix or Sisyphus jQuery plugins

jQuery plugin for custom checkboxes and radio buttons – wCheck

Enjoy!