Skip to content
This repository

A slide/toggle switch for jQuery

branch: master
Readme.md

jQuery/Switch

jQuery/Switch is an iOS-inspired slide/toggle widget. It began as an alternative switch for jQuery Mobile, but it also targets desktop browsers as well.

Note: jQuery/Switch is still in heavy development. Features may change without warning!

Usage

jQuery/Switch builds from <select> elements which contain two <option> elements relating to the "on" and "off" states respectively. These can be in any order, but the first <option> will by default be assumed to relate to the "on" state (this can be overridden).

<select>
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

Then, initialize the plugin:

$(document).ready(function() {
  $('select').switchify();

  // optionally, override the defaults:
  // $('select').switchify({ on: '1', off: '0' });
});

Features

  • Respects the selected value of the original <select>
  • Supports multiple switches
  • Updates the selected value of the original <select> when the state is updated
  • Listens for the 'change' event on the original <select>
  • Respects the "disabled" attribute
  • Works on both desktop and mobile browsers (see browser support below)
  • Drag or click/tap controls as well as API .on(), .off(), and .toggle()
  • Basic keyboard support (tab-enabled, Enter to toggle)
  • Event driven via the "slide" event

Dependencies

The only dependency is jQuery, which is supported from v1.4.4.

Browser support

Mobile

  • iOS4+ Safari: ok
  • Android Mobile Webkit 533.1: ok
  • Other browsers currently untested

IE

  • IE7 and below: no support
  • IE8: works but lacks CSS support (rounded corners, background size)
  • IE9+: ok

Firefox

  • 3.6 and below: lacks CSS support (background size)
  • 4.0+: ok

Safari

  • 4.0 and below: lacks CSS support (background size)
  • 5.0+: ok

Opera

  • 10+: fine

Chrome

  • 12+: fine

Notes

Due to a webkit bug the markup is fairly complex, which makes custom styling difficult. This will hopefully be improved over time, along with wider browser support (removing the dependency on background-size for one).

Additionally, to improve performance the page offset coordinates of each switch is cached. This means that if the "y" position of a switch changes (ie it is moved horizontally) then the switch may not work correctly. Therefore if you have any actions which may result in your switches changing position, you may need to update the cache by calling the plugin with "update" as the argument:

$('select').switchify('update');

Copyright Rawnet 2011. MIT licence.

Something went wrong with that request. Please try again.