Animated Switch Control with jQuery and CSS3 - Checkbox Switcher

File Size: 3.18 KB
Views Total: 1926
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated Switch Control with jQuery and CSS3 - Checkbox Switcher

A dead simple jQuery plugin to convert a checkbox into a nice switch with labels that allows you to toggle an option by sliding the button left or right.

How to use it:

1. Load the jQuery library together with jQuery Checkbox Switcher's JS and CSS files in your web page.

<link rel="stylesheet" href="switcher.1.1.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.switcher.1.1.js"></script>

2. Create a regular checkbox in the web page.

<input type="checkbox" id="checkbox_switcher" value="" name="checkbox_switcher">

3. Call the plugin on the checkbox and set the options for the switch control.

$(function(){
$("#checkbox_switcher").switcher({
  switcher_on_Off : true,
  on_label: "Switcher On",
  off_label: "Switcher Off"
});
});

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