<div class="center">
<div id="switch"></div>
<div id="switch1"></div>
<div id="switch2"></div>
</div>
<footer>
<span>jQuerry Switch Class</span>
</footer>
body {
background-color: #9b59b6;
}
footer {
position: absolute;
left: 0px;
bottom: 10px;
width: 100%;
text-align: center;
margin-bottom: 0px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: #bdc3c7;
min-width: 160px;
}
.center {
display: inline-block;
margin-top: 40vh;
margin-left: 50%;
transform: translate(-50%, 0);
}
.switch {
margin: 10px;
vertical-align: middle;
}
.hr {
margin-top: 5px;
margin-bottom: 5px;
height: 1px;
width: 100%;
background-color: #bdc3c7;
}
/*
// =========================
// == jQuery Switch Class ==
// =========================
*/
$(document).ready(function() {
var cbxSwitch = new CheckboxSwitch('#switch', true, 60, 34);
var cbxSwitch1 = new CheckboxSwitch('#switch1', false, 60, 17);
var cbxSwitch2 = new CheckboxSwitch('#switch2', false, 60, 60);
cbxSwitch.setActiveColor('limegreen');
cbxSwitch.setInactiveColor('lightgrey');
cbxSwitch1.setActiveColor('#e74c3c');
cbxSwitch1.setInactiveColor('#e67e22');
});
$('head').append('<style>.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}</style>');
function CheckboxSwitch(id, round, width, height) {
var self = this;
this.switchID = id;
this.round = round;
this.width = width;
this.height = height;
this.active = '#2196f3';
this.inactive = '#ccc';
$('head').append('<style>' + this.switchID + '{display:inline-block;}' + this.switchID + ' .switch{width:' + this.width + 'px;height:' + this.height + 'px;}' + this.switchID + ' .slider:before{height: ' + String(this.height-8) + 'px;width: ' + String(this.height-8) + 'px;}' + this.switchID + ' input:checked + .slider:before{-webkit-transform: translateX(' + String(this.width-this.height) + 'px);-ms-transform: translateX(' + String(this.width-this.height) + 'px);transform: translateX(' + String(this.width-this.height) + 'px);}' + this.switchID + ' .slider.round{border-radius: ' + this.height + 'px;}</style>');
$(this.switchID).bind('touchstart mousedown', function(e){
$(self.switchID + ' input').prop('checked', !$(self.switchID + ' input').prop('checked'));
});
$(this.switchID).on('click touchend', function (e) {
e.preventDefault();
return false;
});
if(this.round) {
$(this.switchID).html('<label class="switch"><input type="checkbox"><div class="slider round"></div></label><style id="_' + this.switchID.replace('#', '') + '_"></style>');
} else {
$(this.switchID).html('<label class="switch"><input type="checkbox"><div class="slider"></div></label><style id="_' + this.switchID.replace('#', '') + '_"></style>');
}
}
CheckboxSwitch.prototype.setActiveColor = function(color) {
this.active = color;
$('#_' + this.switchID.replace('#', '') + '_').html(this.switchID + ' .switch input:checked+.slider{background-color:' + this.active + '}' + this.switchID + ' .switch .slider{background-color:' + this.inactive + '}');
};
CheckboxSwitch.prototype.setInactiveColor = function(color){
this.inactive = color;
$('#_' + this.switchID.replace('#', '') + '_').html(this.switchID + ' .switch input:checked+.slider{background-color:' + this.active + '}' + this.switchID + ' .switch .slider{background-color:' + this.inactive + '}');
}
This Pen doesn't use any external CSS resources.