Enhanced Switch Control With Custom Styles

Enhanced Switch Control With Custom Styles
File Size: 21.6 KB
Views Total: 1032
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A super tiny jQuery plugin for creating customizable and themeable switch controls to enhance the check/uncheck experiences on the web.

See Also:

How to use it:

1. Load the main script jquery.enhanced-switch.js after loading jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.enhanced-switch.js"></script>

2. Load a theme CSS of your choice in the document. All available themes:

  • iOS
  • Circle
  • Metro
  • Metro Alternative
  • Pingpong
<link rel="stylesheet" href="css/jquery.enhanced-switch-apple.css" />
<link rel="stylesheet" href="css/jquery.enhanced-switch-circle.css" />
<link rel="stylesheet" href="css/jquery.enhanced-switch-metro.css" />
<link rel="stylesheet" href="css/jquery.enhanced-switch-metro-alt.css" />
<link rel="stylesheet" href="css/jquery.enhanced-switch-pingpong.css" />

3. Or create a new theme following the instructations as shown below:

.es-switch-bg {
  /* Set the width and height of the switch background */
  width: ;
  height: ;
  
  /* Set the border-radius of the swtch background - for round switch, make border-radius half the height of the switch and ceil that value (i.e border-radius = math.ceil(height / 2)) */
  border-radius: ;
  
  -webkit-transition: background-color 0.1s ease-in-out;
  -moz-transition: background-color 0.1s ease-in-out;
  -o-transition: background-color 0.1s ease-in-out;
  transition: background-color 0.1s ease-in-out;
}

.es-switch-bg[data-state="false"] {
  /* The colour of the switch when set to false */
  background-color: #;
}

.es-switch-bg[data-state="true"] {
  /* The colour of the switch when set to true */
  background-color: #;
}

.es-toggle {
  /* The dimensions of the switch
     Height should be set using the following formula:
         height = .es-switch-bg.height - 2 * top 
     Set the width to the same value to get an equal sized switch */
  height: ;
  width: ;
  
  position: relative;
  
  /* Set how far the toggle should be from the top of the switch background. */
  top: ;
  
  /* Set the border-radius of the switch.  Set it to 100% to get a round switch */
  border-radius: ;
  
  /* Set the background color of the toggle */
  background-color: #;
  
  -webkit-transition: left 0.1s ease-in-out;
  -moz-transition: left 0.1s ease-in-out;
  -o-transition: left 0.1s ease-in-out;
  transition: left 0.1s ease-in-out;
}

.es-switch-bg[data-state="false"] .es-toggle {
  /* How far the switch should be from the left side of the switch background when set to false.  This should preferably be the same as the 'top' value you set in .es-toggle */
  left: ;
}

.es-switch-bg[data-state="true"] .es-toggle {
  /* How far the switch should be from the left when the switch is set to true.
     A suggested formula to use:
         left = .es-switch-bg.width - .es-toggle.width - .es-switch-bg[data-state="false"].es-toggle.left */
  left: ;
}

4. Create a container to hold the switch control.

<div class="switch"></div>

5. Initialize the plugin to render the switch control on the page.

$(".switch").enhancedSwitch(); 

6. Get the current on/off state.

$(".switch").click(function() {
  var selectedSwitch = $(this);
  selectedSwitch.enhancedSwitch('toggle'); 
  console.log(selectedSwitch.enhancedSwitch('state'));
});

7. Turn this switch control on or off programmatically:

$(".switch").enhancedSwitch('setTrue'); 
$(".switch").enhancedSwitch('setFalse'); 
$(".switch").enhancedSwitch('toggle'); 

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