CSS3 Animated jQuery Toggle Switch Plugin - rcSwitcher
File Size: | 58.2 KB |
---|---|
Views Total: | 7717 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

rcSwitcher is a jQuery plugin that utilizes CSS3 transitions and transforms to generate smooth on/off toggle switches from regular checboxes and radio inputs. This Plugin is distributed under GNU GPL V3 License
Key Features:
- CSS3 powered smooth transition effects.
- 4 built-in themes: flat, light, dark, modern.
- Custom text for on/off state.
- Custom event handlers.
Basic usage:
1. Add jQuery library and the jQuery rcSwitcher's files into your project.
<link rel="stylesheet" href="css/rcswitcher.min.css"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/rcswitcher.min.js"></script>
2. Call the plugin to convert your radio buttons & checkbooxes into toggle switches.
$('.demo :checkbox').rcSwitcher(OPTIONS); $('.demo :radio').rcSwitcher(OPTIONS);
3. Customization options. You can also pass the following options using data-*
attributes, as in data-ontext='ON'
.
// text displayed on ON state onText: 'ON', // text displayed on OFF state offText: 'OFF', // reverse on off order reverse: false, // show corresponding inputs inputs: false, // width of the toggle switch width: 56, // height of the toggle switch height: 20, // control switch blob offset blobOffset: 1, // auto fit text size with respect to switch height autoFontSize: false, // flat, light, dark, modern theme: 'light', // auto stick switch to its parent side autoStick: false,
4. Custom events.
$(':radio').rcSwitcher().on({ 'turnon.rcSwitcher': function( e, dataObj ){ // to do on turning on a switch // dataObj.$input current input jq object // dataObj.$switcher current switch jq object // dataObj.components.$toggler swich toggler jq object // dataObj.components.$on switch on jq object // dataObj.components.$off switch off jq object // dataObj.components.$blob switch blob jq object }, 'turnoff.rcSwitcher': function( e, dataObj ){ // to do on turning off a switch }, 'change.rcSwitcher': function( e, dataObj, changeType ){ // to do on turning on or off a switch // changeType is 'turnon' || 'turnoff' } });
Change log:
2017-02-19
- Add feature to only create rcSwitcher once
- Code optimization
- Add neww theme yellowish-green
- Enhance autrostick
2016-09-30
- Add Support For Disable, Bootstrap Compatible
2016-07-04
- update rcSwitcher to version 3.0.0
About author:
Author: Ahmed Saad
Website: https://github.com/ahmad-sa3d/rcswitcher
This awesome jQuery plugin is developed by ahmad-sa3d. For more Advanced Usages, please check the demo page or visit the official website.