New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
JQuery On/Off Switch
This scripts transforms standard html checkboxes into animated switches.
This is done by hiding the checkbox and instead displaying a custom switch widget. When the switch is checked or unchecked, the checked state of the checkbox will be updated automatically so that you can use it in form inputs as you with with a standard checkbox.
License
Download
Or from Github: https://github.com/DHTMLGoodies/jquery-on-off-switch
Examples/Demos
Manual Configuration
With custom size and color
Before and after demo:
| Available Offline |
Click here to transform the checkbox above.
These switches have been created automatically by class names
| Option One | |
| Option Two | |
| Option Three | |
| Option Four with custom html attributes |
Configuration
Include files
Example:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"> </script>
<script type="text/javascript" src="js/on-off-switch.js"> </script>
<link rel="stylesheet" type="text/css" href="css/on-off-switch.css"/>
Step 2: Add one or more checkboxes or hidden inputs which will be converted to a switch.
Example:
<input type="checkbox" id="id-of-checkbox" checked name="check1">
<!-- value="1" for checked, value="0" for unchecked -->
<input type="hidden" id="id-of-hidden" value="1" name="hidden">
Step3: Configure the switch
These are the options you can configure:
- el: References to a checkbox or hidden input field, example: el:"#id-of-checkbox" for <input type="checkbox" id="id-of-checkbox"> value="1" checked>.
- textOn: Optional text when checked
- textOff: Optional text when unchecked
- height: Optional height in pixels of the switch(default = 30)
- width: Optional width in pixels of the switch. If not set, width will be calculated based on text widths(textOn, textOff)
- trackColorOn: Track background color when checked (default = green).
- trackColorOff: Track background color when unchecked (default = light gray).
- textColorOn: text color of textOn.
- textColorOff: text color of textOff.
- listener: Optional function to call on change. Arguments: name of checkbox and
checked(true|false).
Example:
listener:function(name, checked){ alert("Name: " + name + " - checked: " + checked); } - trackBorderColor: Optional border color for the background.
- textSizeRatio: Size of text relative to height of switch (default = 0.4).
Example code:
<script type="text/javascript">
new DG.OnOffSwitch({
el: '#id-of-checkbox',
textOn: 'Yes',
textOff: 'No',
height:40,
trackColorOn:'#F57C00',
trackColorOff:'#666',
textColorOff:'#fff',
trackBorderColor:'#555'
});
</script>
Convert Multiple checkboxes.
The DG.OnOffSwitch is used to convert a single checkbox into a switch. You also have DG.OnOffSwitchAuto which is used to convert many checkboxes at once. This is how you do it:
Step 1: give all your checkboxes a css class.
Example:
<input type="checkbox" class="custom-switch" checked
name="check1">
<input type="checkbox" class="custom-switch"
name="check2">
<input type="checkbox" class="custom-switch" checked
name="check4" data-text-on="On" data-text-off="Off">
Step 2: Call DG.OnOffSwitchAuto.
<script type="text/javascript">
new DG.OnOffSwitchAuto({
cls:'.custom-switch',
textOn:'Yes',
textOff:'No'
});
</script>
Specify the CSS class name of your checkboxes using the cls attribute. Then configure the switches using the same configuration options as for DG.OnOffSwitch shown above.
If you need individual styling/texts for some of the switches, use custom html properties like data-textOn and data-textOff, i.e. the property name prefixed by data-
Example:
<input type="checkbox" class="custom-switch" checked name="check4" data-textOn="On" data-textOff="Off">
Methods:
The following public methods are available:
- toggle: Toggles the checked state of the switch.
- check: Set the switch to checked.
- uncheck: Set the switch to unchecked.
- getValue: Returns true when checked, false otherwise.
The script will also listen to the jQuery event "click". Example:
<input type="checkbox" name="on-off-switch-demo6" class="custom-switch" id="on-off-switch-demo6"><a href="#" onclick="$('#on-off-switch-demo6').click();return false">Execute $('#on-off-switchdemo6').click()</a>
Access a specific checkbox using code:
The automatically created checkboxes can be access with code using the syntax:
DG.switches("name-of-checkbox") // or DG.switches("#id-of-checkbox")
Where name-of-checkbox is the name attribute of the native checkbox, example:
<input type="checkbox" name="name-of-checkbox" class="custom-switch" id="id-of-checkbox">
To access it by id, use the # prefix.
Then you can call the methods above on this object:
DG.switches["#id-of-checkbox"].toggle();
DG.switches["name-of-checkbox"].check();
DG.switches["name-of-checkbox"].uncheck();
Post your comment
Comment preview: