⚠️ This project is no longer maintained! ⚠️

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!

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' });
});

• 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

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

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

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

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

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

• 10+: fine

• 12+: fine

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');