Switchable 1.0.x
Replaces checkbox by beautiful iphone style switch buttons.
Check it out its Live Demo.
Getting started
Import required libraries and stylesheets.
Switchable requires Jquery.
<link rel="stylesheet" type="text/css" href="../src/switchable.css" /> <script type="text/javascript" src="js/jquery.1.7.1.js"></script> <script type="text/javascript" src="../src/switchable.min.js"></script>
Create the input checkboxes that you wanna to hold the switcher
<input type="checkbox" id="myswitch" checked value="checked" data-label="The label you wanna comes here" >
Then, it's necessary to call it.
<script type="text/javascript" > $(document).ready(function(){ $('#myswitch').switchable(); }); </script>
That's all.
Options
You also can pass some options when initializing it.
These options are:
label_position : string
Defines the label position.
Possible values are 'before' and 'after'.
Default: before
checked_color : string
A custom color for the switch when checked It's possible to provide the following pattern:
- #FFF,
- rgb(255,255,255),
- rgba(255,255,255, 0.5) or
- white
Default: null
readonly : boolean
Indicates wheter the widget is readyonly.
Default: false
click : callback
It allows you to call any custom function on 'click' event.
The callback function will receive the following parameters:
- event,
- boolean (that indicates if it's checked)
The referred element (this) is available inside the event object, named as 'switcher'. So, if you need to retrieve the clicked switchable element, you just need to use the following code:
<script type="text/javascript" > $(document).ready(function(){ $('#myswitch').switchable({ click: function( ev, checked ) { console.log( ev.switcher.attr('id') ); } }); }); </script>