Stylish Toggle Switch Plugin with jQuery and CSS3 - Light Switch

lightSwitch is a lightweight jQuery plugin which convert the standard checkbox into a stylish animated toggle switch.

How to use it

1. Include the required Font Awesome 4 for the toggle icons.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2. Include the jQuery library and the jQuery lightSwitch's JavaScript and stylesheet in the web page.

<link href="css/light-switch.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.light-switch.js"></script>

3. Create a standard checkbox on your web page.

<input type="checkbox" name="light" class="lightSwitch">

4. Call the plugin.

$(function() {
  $('.lightSwitch').lightSwitch();
});

5. Optionally, you can replace the toggle icons in the jquery.light-switch.js

this.wrapZone.append('
...<i class="front fa fa-moon-o"></i><i class="back fa fa-sun-o"></i>...
')

6. Callback functions.

$(function() {
  $('.lightSwitch').lightSwitch({
  on_callback: undefined,
  off_callback: undefined	
  });
});

---

This awesome jQuery plugin is developed by sebastiengregoire. For more Advanced Usages, please check the demo page or visit the official website.