"sSwitch - JQuery Toggle Button Plugin Demo"
Bootstrap 3.3.0 Snippet by sgeekorg

<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));

Questions / Comments:

Related: See More