iOS Style Toggle Switch using jQuery

• Summary
• Quick Examples
• Documentation
  • Basic Usage
  • Options
  • Events
  • Get The Value
• Change Log

Author : https://github.com/dzy0451/
Github Repo : https://github.com/dzy0451/iOS-Toggle-Switch

Summary

You cannot count me as an Apple fun, not a crazy one, :) But I do like the toggle switch(checkbox?) on iPhone, iPod etc. Who do not? And in one of my web apps, I want to use such toggle switches to enhance the user experience.

So, I created the button graphic in Photoshop and implemented the toggle switch in my app. It all looks good. After that, I figure that maybe guys on the web will need such a toolkit to help buiding their websites. So, I started to work on a jQuery plugin to wrap this up. I'm hoping it may do some good to you guys. :)

Let's check some examples first.

Quick Examples

Default , turned on
Turned off
Small, turned on
Small, turned off
Of course, the English version
Events handling for the Default switch

Documentation

Basic Usage

The basic is pretty straight forward, just add the js and css files in the header section of you page, and then call the $.fn.toggleSwitch() method.

<link rel="stylesheet" href="css/style.css" media="screen" />
<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.ios-toggle.js"></script>
<script type="text/javascript"> 
$(function(){
	$('.toggle-switch').toggleSwitch();
});
</script>

In your HTML, you need to define a <a> tag

<a href="javascript:void()" class="toggle-switch" rel="foo"></a>

The 'rel' attribute : You need to set the "rel" attribute here, because we need to create a hidden input field to hold the state of the switch, so that you can pass it to the backend via a web form. Here the "rel" attribute sets the name of the hidden input.

Initial state : By default, the switch is turned on. To set the initial state of the switch, simply add a class 'on' or 'off' to the <a> tag.

<a href="javascript:void()" class="toggle-switch off" rel="foo"></a>

Why it's Chinese? : Because I am Chinese, so the button defaults to Chinese. :) But you can change it to English by adding the 'en' class.

<a href="javascript:void()" class="toggle-switch en off" rel="foo"></a>

Smaller size : To make the switch smaller( 46px * 16px ), simply add the 'small' class to it.

<a href="javascript:void()" class="toggle-switch en small off" rel="foo"></a>

Options

When calling the $.fn.toggleSwitch() method, you can pass a object with settings in it. It is pretty simple for now.

$('.toggle-switch').toggleSwitch({
	on : 'onValue',
	off : 'offValue',
	speed : 100
});

on : As mentioned above, we use a hidden input to hold the value of the switch, and this param defines the value when the switch is turned on. Defaults to 'on'.

off : As mentioned above, we use a hidden input to hold the value of the switch, and this param defines the value when the switch is turned off. Defaults to 'off'.

speed : This sets the speed of the slide animation(in milliseconds). Defaults to 200.

Events

The toggle switch support 2 custom events. on and off. You can bind callbacks to these events.

$('.toggle-switch').bind('on', function(ev){
	console.log('Switched on');
});
$('.toggle-switch').bind('off', function(ev){
	console.log('Switched off');
});

Get The Value

Since we're using an <a> tag as the HTML element to present the toggle switch, we can not use a the $.fn.val() call to fetch the value. So, you will need to use the $.fn.toggleSwitch() call, but with a string param 'val'.

$('#foo').toggleSwitch('val');

Change Log

Aug, 11th 2011 : Initial version.