<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>sSwitch - JQuery Toggle Button Plugin Demo</h2>
<div class="cls-scroller col-md-8">
<div class="row">
<div class="col-md-12">
<input class="checkbox" name="checkboxName" type="checkbox">
</div>
</div>
<div class="row">
<div class="col-md-12">
<b>Result:</b>
<span class="cls-result"></span>
</div>
</div>
<hr>
<hr>
</div>
</div>
</div>
.s-switch input[type='checkbox']{display:none}
.s-switch {
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.s-switch:before {
content: ' ';
background: #D9534F !important;
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.s-switch:after {
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
z-index: 2;
background: #FFFFFF;
position: absolute;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
top: 1px;
left: 3px;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.s-switch-on, .s-switch-on:before{
background: #4DAF48 !important;
}
.s-switch-on:after{
left: 31px !important;
}
.s-switch-readonly, .s-switch-disabled{
opacity: 0.8;
}
$(document).ready(function(){
$(".checkbox").Sswitch({
onSwitchChange: function(_this) {
alert("Status: "+_this.options.state);
}
});
});
(function($) {
$.fn.Sswitch = function(element, options ) {
this.$element = $(this);
this.options = $.extend({}, $.fn.Sswitch.defaults, {
state: this.$element.is(":checked"),
disabled: this.$element.is(":disabled"),
readonly: this.$element.is("[readonly]"),
parentClass: this.$element.data("parent"),
onSwitchChange: element.onSwitchChange
},options);
this.$container = $("<div>", {
"class": (function(_this){
return function(){
var classes;
classes = [_this.options.parentClass];
classes.push(_this.options.state ? "" + _this.options.parentClass + "-on" : "" + _this.options.parentClass + "-off");
if (_this.options.disabled) {
classes.push("" + _this.options.parentClass + "-disabled");
}
if (_this.options.readonly) {
classes.push("" + _this.options.parentClass + "-readonly");
}
if (_this.$element.attr("id")) {
classes.push("" + _this.options.parentClass + "-id-" + (_this.$element.attr("id")));
}
return classes.join(" ");
};
})(this)()
});
this.$label = $("<span>", {
html: this.options.labelText,
"class": "" + this.options.parentClass + "-label"
});
this.$container = this.$element.wrap(this.$container).parent();
this.$element.before(this.$label);
return this.$container.on("click", (function(_this) {
return function(event) {
event.preventDefault();
event.stopPropagation();
if (_this.options.readonly || _this.options.disabled) {
return _this.target;
}
_this.options.state = !_this.options.state;
_this.$element.prop("checked", _this.options.state);
_this.$container.addClass(_this.options.state ? "" + _this.options.parentClass + "-on" : "" + _this.options.parentClass + "-off").removeClass(_this.options.state ? "" + _this.options.parentClass + "-off" : "" + _this.options.parentClass + "-on");
_this.options.onSwitchChange(_this);
return _this;
};
})(this));
return this.$element;
},
$.fn.Sswitch.defaults = {
text : 'Default Title',
fontsize : 10,
state: true,
disabled: false,
readonly: false,
parentClass: "s-switch",
onSwitchChange: function() {}
};
}(jQuery));
