CSS3 Animated jQuery Toggle Switch Plugin - rcSwitcher

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.