This time I will share jQuery Plugin and tutorial about Enhanced Switch Control With Custom Styles, hope it will help you in programming stack.
| File Size: | 21.6 KB |
|---|---|
| Views Total: | 871 |
| 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.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<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
1 |
<link rel="stylesheet" href="css/jquery.enhanced-switch-apple.css" /> |
2 |
<link rel="stylesheet" href="css/jquery.enhanced-switch-circle.css" /> |
3 |
<link rel="stylesheet" href="css/jquery.enhanced-switch-<a href="https://www.jqueryscript.net/tags.php?/metro/">metro</a>.css" /> |
4 |
<link rel="stylesheet" href="css/jquery.enhanced-switch-metro-alt.css" /> |
5 |
<link rel="stylesheet" href="css/jquery.enhanced-switch-pingpong.css" /> |
3. Or create a new theme following the instructations as shown below:
01 |
.es-switch-bg { |
02 |
/* Set the width and height of the switch background */ |
03 |
width: ; |
04 |
height: ; |
05 |
|
06 |
/* 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)) */ |
07 |
border-radius: ; |
08 |
|
09 |
-webkit-transition: background-color 0.1s ease-in-out; |
10 |
-moz-transition: background-color 0.1s ease-in-out; |
11 |
-o-transition: background-color 0.1s ease-in-out; |
12 |
transition: background-color 0.1s ease-in-out; |
13 |
} |
14 |
15 |
.es-switch-bg[data-state="false"] { |
16 |
/* The colour of the switch when set to false */ |
17 |
background-color: #; |
18 |
} |
19 |
20 |
.es-switch-bg[data-state="true"] { |
21 |
/* The colour of the switch when set to true */ |
22 |
background-color: #; |
23 |
} |
24 |
25 |
.es-toggle { |
26 |
/* The dimensions of the switch |
27 |
Height should be set using the following formula: |
28 |
height = .es-switch-bg.height - 2 * top |
29 |
Set the width to the same value to get an equal sized switch */ |
30 |
height: ; |
31 |
width: ; |
32 |
|
33 |
position: relative; |
34 |
|
35 |
/* Set how far the toggle should be from the top of the switch background. */ |
36 |
top: ; |
37 |
|
38 |
/* Set the border-radius of the switch. Set it to 100% to get a round switch */ |
39 |
border-radius: ; |
40 |
|
41 |
/* Set the background color of the toggle */ |
42 |
background-color: #; |
43 |
|
44 |
-webkit-transition: left 0.1s ease-in-out; |
45 |
-moz-transition: left 0.1s ease-in-out; |
46 |
-o-transition: left 0.1s ease-in-out; |
47 |
transition: left 0.1s ease-in-out; |
48 |
} |
49 |
50 |
.es-switch-bg[data-state="false"] .es-toggle { |
51 |
/* 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 */ |
52 |
left: ; |
53 |
} |
54 |
55 |
.es-switch-bg[data-state="true"] .es-toggle { |
56 |
/* How far the switch should be from the left when the switch is set to true. |
57 |
A suggested formula to use: |
58 |
left = .es-switch-bg.width - .es-toggle.width - .es-switch-bg[data-state="false"].es-toggle.left */ |
59 |
left: ; |
60 |
} |
4. Create a container to hold the switch control.
1 |
<div class="switch"></div> |
5. Initialize the plugin to render the switch control on the page.
1 |
$(".switch").enhancedSwitch(); |
6. Get the current on/off state.
1 |
$(".switch").click(function() { |
2 |
var selectedSwitch = $(this); |
3 |
selectedSwitch.enhancedSwitch('toggle'); |
4 |
console.log(selectedSwitch.enhancedSwitch('state')); |
5 |
}); |
7. Turn this switch control on or off programmatically:
1 |
$(".switch").enhancedSwitch('setTrue'); |
2 |
$(".switch").enhancedSwitch('setFalse'); |
3 |
$(".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.
