updated docs and README

README.md

@@ -2,8 +2,6 @@
 [![Dependency Status](https://david-dm.org/nostalgiaz/bootstrap-switch.svg?theme=shields.io)](https://david-dm.org/nostalgiaz/bootstrap-switch)
 [![devDependency Status](https://david-dm.org/nostalgiaz/bootstrap-switch/dev-status.svg?theme=shields.io)](https://david-dm.org/nostalgiaz/bootstrap-switch#info=devDependencies)
 [![NPM Version](http://img.shields.io/npm/v/bootstrap-switch.svg)](https://www.npmjs.org/)
-[![Gittip nostalgiaz](http://img.shields.io/gittip/nostalgiaz.svg)](https://www.gittip.com/nostalgiaz)
-[![Gittip LostCrew](http://img.shields.io/gittip/LostCrew.svg)](https://www.gittip.com/LostCrew)
 
 Turn checkboxes and radio buttons in toggle switches.
 
@@ -54,7 +52,7 @@ A NuGet package is available [here](https://github.com/blachniet/bootstrap-switc
 
 ## Supported browsers
 
-IE8+ and all the other modern browsers (until proven otherwise: submit a issue and let's see what we can do).
+IE9+ and all the other modern browsers.
 
 ## License
 

docs/bootstrap-switch.css

@@ -1,193 +0,0 @@
-/* ========================================================================
- * bootstrap-switch - v3.0.0
- * http://www.bootstrap-switch.org
- * ========================================================================
- * Copyright 2012-2013 Mattia Larentis
- *
- * ========================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================================
- */
-
-.bootstrap-switch {
-  display: inline-block;
-  cursor: pointer;
-  border-radius: 4px;
-  border: 1px solid;
-  border-color: #cccccc;
-  position: relative;
-  text-align: left;
-  overflow: hidden;
-  line-height: 8px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  min-width: 100px;
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-.bootstrap-switch.bootstrap-switch-mini {
-  min-width: 72px;
-}
-.bootstrap-switch.bootstrap-switch-mini > div > span,
-.bootstrap-switch.bootstrap-switch-mini > div > label {
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 10px;
-  line-height: 9px;
-}
-.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-mini-icons {
-  height: 1.20em;
-  line-height: 9px;
-  vertical-align: text-top;
-  text-align: center;
-  transform: scale(0.6);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-.bootstrap-switch.bootstrap-switch-small {
-  min-width: 80px;
-}
-.bootstrap-switch.bootstrap-switch-small > div > span,
-.bootstrap-switch.bootstrap-switch-small > div > label {
-  padding-bottom: 3px;
-  padding-top: 3px;
-  font-size: 12px;
-  line-height: 18px;
-}
-.bootstrap-switch.bootstrap-switch-large {
-  min-width: 120px;
-}
-.bootstrap-switch.bootstrap-switch-large > div > span,
-.bootstrap-switch.bootstrap-switch-large > div > label {
-  padding-bottom: 9px;
-  padding-top: 9px;
-  font-size: 16px;
-  line-height: normal;
-}
-.bootstrap-switch.bootstrap-switch-animate > div {
-  -webkit-transition: margin-left 0.5s;
-  transition: margin-left 0.5s;
-}
-.bootstrap-switch.bootstrap-switch-on > div {
-  margin-left: 0%;
-}
-.bootstrap-switch.bootstrap-switch-on > div > label {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-off > div {
-  margin-left: -50%;
-}
-.bootstrap-switch.bootstrap-switch-off > div > label {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch.bootstrap-switch-disabled,
-.bootstrap-switch.bootstrap-switch-readonly {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-disabled > div > span,
-.bootstrap-switch.bootstrap-switch-readonly > div > span,
-.bootstrap-switch.bootstrap-switch-disabled > div > label,
-.bootstrap-switch.bootstrap-switch-readonly > div > label {
-  cursor: default !important;
-}
-.bootstrap-switch.bootstrap-switch-focused {
-  border-color: #66afe9;
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-.bootstrap-switch > div {
-  display: inline-block;
-  width: 150%;
-  top: 0;
-  border-radius: 4px;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-.bootstrap-switch > div > span,
-.bootstrap-switch > div > label {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block !important;
-  height: 100%;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  font-size: 14px;
-  line-height: 20px;
-}
-.bootstrap-switch > div > span {
-  text-align: center;
-  z-index: 1;
-  width: 33.333333333%;
-}
-.bootstrap-switch > div > span.bootstrap-switch-handle-on {
-  color: #f00;
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-handle-off {
-  color: #000;
-  background: #eeeeee;
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.bootstrap-switch > div > span.bootstrap-switch-primary {
-  color: #fff;
-  background: #428bca;
-}
-.bootstrap-switch > div > span.bootstrap-switch-info {
-  color: #fff;
-  background: #5bc0de;
-}
-.bootstrap-switch > div > span.bootstrap-switch-success {
-  color: #fff;
-  background: #5cb85c;
-}
-.bootstrap-switch > div > span.bootstrap-switch-warning {
-  background: #f0ad4e;
-  color: #fff;
-}
-.bootstrap-switch > div > span.bootstrap-switch-danger {
-  color: #fff;
-  background: #d9534f;
-}
-.bootstrap-switch > div > span.bootstrap-switch-default {
-  color: #000;
-  background: #eeeeee;
-}
-.bootstrap-switch > div > label {
-  text-align: center;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  z-index: 100;
-  width: 33.333333333%;
-  color: #333333;
-  background: #ffffff;
-}
-.bootstrap-switch input[type='radio'],
-.bootstrap-switch input[type='checkbox'] {
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}

docs/bootstrap-switch.js

@@ -1,446 +0,0 @@
-/* ========================================================================
- * bootstrap-switch - v3.0.0
- * http://www.bootstrap-switch.org
- * ========================================================================
- * Copyright 2012-2013 Mattia Larentis
- *
- * ========================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================================
- */
-
-(function() {
-  var __slice = [].slice;
-
-  (function($, window) {
-    "use strict";
-    var BootstrapSwitch;
-    BootstrapSwitch = (function() {
-      BootstrapSwitch.prototype.defaults = {
-        state: true,
-        size: null,
-        animate: true,
-        disabled: false,
-        readonly: false,
-        onColor: "primary",
-        offColor: "default",
-        onText: "ON",
-        offText: "OFF",
-        labelText: " "
-      };
-
-      BootstrapSwitch.prototype.name = "bootstrap-switch";
-
-      function BootstrapSwitch(element, options) {
-        if (options == null) {
-          options = {};
-        }
-        this.$element = $(element);
-        this.options = $.extend({}, this.defaults, options, {
-          state: this.$element.is(":checked"),
-          size: this.$element.data("size"),
-          animate: this.$element.data("animate"),
-          disabled: this.$element.is(":disabled"),
-          readonly: this.$element.is("[readonly]"),
-          onColor: this.$element.data("on-color"),
-          offColor: this.$element.data("off-color"),
-          onText: this.$element.data("on-text"),
-          offText: this.$element.data("off-text"),
-          labelText: this.$element.data("label-text")
-        });
-        this.$on = $("<span>", {
-          "class": "" + this.name + "-handle-on " + this.name + "-" + this.options.onColor,
-          html: this.options.onText
-        });
-        this.$off = $("<span>", {
-          "class": "" + this.name + "-handle-off " + this.name + "-" + this.options.offColor,
-          html: this.options.offText
-        });
-        this.$label = $("<label>", {
-          "for": this.$element.attr("id"),
-          html: this.options.labelText
-        });
-        this.$wrapper = $("<div>", {
-          "class": (function(_this) {
-            return function() {
-              var classes;
-              classes = ["" + _this.name];
-              classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
-              if (_this.options.size != null) {
-                classes.push("" + _this.name + "-" + _this.options.size);
-              }
-              if (_this.options.animate) {
-                classes.push("" + _this.name + "-animate");
-              }
-              if (_this.options.disabled) {
-                classes.push("" + _this.name + "-disabled");
-              }
-              if (_this.options.readonly) {
-                classes.push("" + _this.name + "-readonly");
-              }
-              if (_this.$element.attr("id")) {
-                classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
-              }
-              return classes.join(" ");
-            };
-          })(this)
-        });
-        this.$div = this.$element.wrap($("<div>")).parent();
-        this.$wrapper = this.$div.wrap(this.$wrapper).parent();
-        this.$element.before(this.$on).before(this.$label).before(this.$off);
-        this._elementHandlers();
-        this._handleHandlers();
-        this._labelHandlers();
-        this._formHandler();
-      }
-
-      BootstrapSwitch.prototype._constructor = BootstrapSwitch;
-
-      BootstrapSwitch.prototype.state = function(value, skip) {
-        if (typeof value === "undefined") {
-          return this.options.state;
-        }
-        if (this.options.disabled || this.options.readonly) {
-          return this.$element;
-        }
-        value = !!value;
-        this.$element.prop("checked", value).trigger("change.bootstrapSwitch", skip);
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.toggleState = function(skip) {
-        if (this.options.disabled || this.options.readonly) {
-          return this.$element;
-        }
-        return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
-      };
-
-
-      /*
-      TODO: refactor
-      toggleRadioState: (uncheck, skip) ->
-        $element = @$element.not ":checked"
-
-        if uncheck
-          $element.trigger "change.bootstrapSwitch", skip
-        else
-          $element.prop("checked", not @$element.is ":checked").trigger "change.bootstrapSwitch", skip
-        @$element
-       */
-
-      BootstrapSwitch.prototype.size = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.size;
-        }
-        if (this.options.size != null) {
-          this.$wrapper.removeClass("" + this.name + "-" + this.options.size);
-        }
-        this.$wrapper.addClass("" + this.name + "-" + value);
-        this.options.size = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.animate = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.animate;
-        }
-        value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-animate");
-        this.options.animate = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.disabled = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.disabled;
-        }
-        value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-disabled");
-        this.$element.prop("disabled", value);
-        this.options.disabled = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.toggleDisabled = function() {
-        this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("" + this.name + "-disabled");
-        this.options.disabled = !this.options.disabled;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.readonly = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.readonly;
-        }
-        value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-readonly");
-        this.$element.prop("readonly", value);
-        this.options.readonly = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.toggleReadonly = function() {
-        this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("" + this.name + "-readonly");
-        this.options.readonly = !this.options.readonly;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.onColor = function(value) {
-        var color;
-        color = this.options.onColor;
-        if (typeof value === "undefined") {
-          return color;
-        }
-        if (color != null) {
-          this.$on.removeClass("" + this.name + "-" + color);
-        }
-        this.$on.addClass("" + this.name + "-" + value);
-        this.options.onColor = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.offColor = function(value) {
-        var color;
-        color = this.options.offColor;
-        if (typeof value === "undefined") {
-          return color;
-        }
-        if (color != null) {
-          this.$off.removeClass("" + this.name + "-" + color);
-        }
-        this.$off.addClass("" + this.name + "-" + value);
-        this.options.offColor = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.onText = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.onText;
-        }
-        this.$on.html(value);
-        this.options.onText = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.offText = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.offText;
-        }
-        this.$off.html(value);
-        this.options.offText = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.labelText = function(value) {
-        if (typeof value === "undefined") {
-          return this.options.labelText;
-        }
-        this.$label.html(value);
-        this.options.labelText = value;
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype.destroy = function() {
-        var $form;
-        $form = this.$element.closest("form");
-        if ($form.length) {
-          $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
-        }
-        this.$div.children().not(this.$element).remove();
-        this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
-        return this.$element;
-      };
-
-      BootstrapSwitch.prototype._elementHandlers = function() {
-        return this.$element.on({
-          "change.bootstrapSwitch": (function(_this) {
-            return function(e, skip) {
-              var checked;
-              e.preventDefault();
-              e.stopPropagation();
-              e.stopImmediatePropagation();
-              checked = _this.$element.is(":checked");
-              if (checked === _this.options.state) {
-                return;
-              }
-              _this.options.state = checked;
-              _this.$wrapper.removeClass(checked ? "" + _this.name + "-off" : "" + _this.name + "-on").addClass(checked ? "" + _this.name + "-on" : "" + _this.name + "-off");
-              if (!skip) {
-                if (_this.$element.is(":radio")) {
-                  $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
-                }
-                return _this.$element.trigger("switchChange", {
-                  el: _this.$element,
-                  value: checked
-                });
-              }
-            };
-          })(this),
-          "focus.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              e.preventDefault();
-              e.stopPropagation();
-              e.stopImmediatePropagation();
-              return _this.$wrapper.addClass("" + _this.name + "-focused");
-            };
-          })(this),
-          "blur.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              e.preventDefault();
-              e.stopPropagation();
-              e.stopImmediatePropagation();
-              return _this.$wrapper.removeClass("" + _this.name + "-focused");
-            };
-          })(this),
-          "keydown.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              if (!e.which || _this.options.disabled || _this.options.readonly) {
-                return;
-              }
-              switch (e.which) {
-                case 32:
-                  e.preventDefault();
-                  e.stopPropagation();
-                  e.stopImmediatePropagation();
-                  return _this.toggleState();
-                case 37:
-                  e.preventDefault();
-                  e.stopPropagation();
-                  e.stopImmediatePropagation();
-                  return _this.state(false);
-                case 39:
-                  e.preventDefault();
-                  e.stopPropagation();
-                  e.stopImmediatePropagation();
-                  return _this.state(true);
-              }
-            };
-          })(this)
-        });
-      };
-
-      BootstrapSwitch.prototype._handleHandlers = function() {
-        this.$on.on("click.bootstrapSwitch", (function(_this) {
-          return function(e) {
-            _this.state(false);
-            return _this.$element.trigger("focus.bootstrapSwitch");
-          };
-        })(this));
-        return this.$off.on("click.bootstrapSwitch", (function(_this) {
-          return function(e) {
-            _this.state(true);
-            return _this.$element.trigger("focus.bootstrapSwitch");
-          };
-        })(this));
-      };
-
-      BootstrapSwitch.prototype._labelHandlers = function() {
-        return this.$label.on({
-          "mousemove.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              var left, percent, right;
-              if (!_this.drag) {
-                return;
-              }
-              percent = ((e.pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
-              left = 25;
-              right = 75;
-              if (percent < left) {
-                percent = left;
-              } else if (percent > right) {
-                percent = right;
-              }
-              _this.$div.css("margin-left", "" + (percent - right) + "%");
-              return _this.$element.trigger("focus.bootstrapSwitch");
-            };
-          })(this),
-          "mousedown.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              if (_this.drag || _this.options.disabled || _this.options.readonly) {
-                return;
-              }
-              _this.drag = true;
-              if (_this.options.animate) {
-                _this.$wrapper.removeClass("" + _this.name + "-animate");
-              }
-              return _this.$element.trigger("focus.bootstrapSwitch");
-            };
-          })(this),
-          "mouseup.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              if (!_this.drag) {
-                return;
-              }
-              _this.drag = false;
-              _this.$element.prop("checked", parseInt(_this.$div.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
-              _this.$div.css("margin-left", "");
-              if (_this.options.animate) {
-                return _this.$wrapper.addClass("" + _this.name + "-animate");
-              }
-            };
-          })(this),
-          "click.bootstrapSwitch": (function(_this) {
-            return function(e) {
-              e.preventDefault();
-              e.stopImmediatePropagation();
-              _this.toggleState();
-              return _this.$element.trigger("focus.bootstrapSwitch");
-            };
-          })(this)
-        });
-      };
-
-      BootstrapSwitch.prototype._formHandler = function() {
-        var $form;
-        $form = this.$element.closest("form");
-        if ($form.data("bootstrap-switch")) {
-          return;
-        }
-        return $form.on("reset.bootstrapSwitch", function() {
-          return window.setTimeout(function() {
-            return $form.find("input").filter(function() {
-              return $(this).data("bootstrap-switch");
-            }).each(function() {
-              return $(this).bootstrapSwitch("state", false);
-            });
-          }, 1);
-        }).data("bootstrap-switch", true);
-      };
-
-      return BootstrapSwitch;
-
-    })();
-    $.fn.extend({
-      bootstrapSwitch: function() {
-        var args, option, ret;
-        option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
-        ret = this;
-        this.each(function() {
-          var $this, data;
-          $this = $(this);
-          data = $this.data("bootstrap-switch");
-          if (!data) {
-            $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
-          }
-          if (typeof option === "string") {
-            return ret = data[option].apply(data, args);
-          }
-        });
-        return ret;
-      }
-    });
-    return $.fn.bootstrapSwitch.Constructor = BootstrapSwitch;
-  })(window.jQuery, window);
-
-}).call(this);

docs/index.css → docs/css/main.css

@@ -32,11 +32,12 @@ body {
   z-index: 2000;
 }
 
-.footer {
+.bottom {
   border-top: 1px solid #eee;
-  margin-top: 80px;
-  padding-top: 40px;
-  padding-bottom: 40px;
+  margin-top: 40px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  text-align: center;
 }
 
 .hljs {

docs/index.jade

@@ -1,562 +0,0 @@
-doctype html
-html(lang='en')
-  head
-    meta(charset='utf-8')
-    meta(http-equiv='X-UA-Compatible', content='IE=edge')
-    meta(name='viewport', content='width=device-width, initial-scale=1.0')
-    meta(name='description', content='Turn checkboxes and radio buttons in toggle switches.')
-    meta(name='author', content='Mattia Larentis, Emanuele Marchi and Peter Stein')
-    title Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches
-    link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
-    link(href='docs/lib/css/bootstrap.min.css', rel='stylesheet')
-    link(href='docs/lib/css/highlight.css', rel='stylesheet')
-    link(href='dist/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
-    link(href='docs/index.css', rel='stylesheet')
-    script.
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-43092768-1']);
-      _gaq.push(['_trackPageview']);
-      (function () {
-        var ga = document.createElement('script');
-        ga.type = 'text/javascript';
-        ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(ga, s);
-      })();
-  body
-    a(href='https://github.com/nostalgiaz/bootstrap-switch', id='github')
-      img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub')
-
-    header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
-      .container
-        .navbar-header
-          button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
-            span.sr-only Toggle navigation
-            span.icon-bar
-            span.icon-bar
-            span.icon-bar
-          a.navbar-brand(href='../') Bootstrap Switch <strong>3</strong>
-        nav#collapse.collapse.navbar-collapse(role='navigation')
-          ul.nav.navbar-nav
-            li.dropdown
-              a(href='#', data-toggle='dropdown')
-                | Download
-                span.caret
-              ul.dropdown-menu
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 3 (Stable)
-                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') 2.0.1 (Legacy)
-            li: a(href='#new') What's new
-            li: a(href='#start') Start
-            li.dropdown
-              a(href='#', data-toggle='dropdown')
-                | Documentation
-                span.caret
-              ul.dropdown-menu
-                li.dropdown-header Version 3 (Stable)
-                li: a(href='#options-3') Options
-                li: a(href='#methods-3') Methods
-                li: a(href='#events-3') Events
-                li.divider
-                li.dropdown-header Version 2.0.1 (Legacy)
-                li: a(href='#options-2') Options
-                li: a(href='#methods-2') Methods
-                li: a(href='#events-2') Events
-            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
-
-    .container
-      .header
-        h2.title Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span>
-
-        p.lead Turn checkboxes and radio buttons in toggle switches.
-        p Select the version to download:
-        p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3', data-off-text='2.0.1')
-        p
-          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-3', class='btn btn-lg btn-primary') Download 3
-          a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
-        br
-        br
-        iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
-        iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
-        br
-        br
-        br
-
-      .alert.alert-info
-        p
-          | <strong>Documentation in progress!</strong><br>
-          | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
-          | understandable as possible.<br>
-          | If you feel there is something missing, submit a
-          | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
-          | help is needed. Many thanks.
-
-      #new
-        h1.page-header What's new in version 3
-
-        ul
-          li API redesign for a more intuitive use
-          li Entire code source rewriting focused on cleanliness and performance
-          li Initialization options can be passed as JavaScript object or written as <code>data-*</code>
-          li Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code>
-          li Plugin instance publicly available calling <code>.data('bootstrap-switch')</code>
-          li Global overridable defaults options
-          li Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options
-          li New <code>onInit</code> event
-          li Event namespacing
-          li Full Bootstrap 3 support
-          li A lot of fixed bug, as usual
-
-      #start
-        h1.page-header Getting Started
-
-        p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
-        pre: code
-          | [...]
-          | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
-          | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
-          | &lt;script src="jquery.js"&gt;&lt;/script&gt;
-          | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
-          | [...]
-
-        p Add your checkbox.
-        pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
-
-        p Initialize Bootstrap Switch.
-        pre: code $("[name='my-checkbox']").bootstrapSwitch();
-
-        p Enjoy.
-
-      #documentation-3
-        h1.page-header Documentation <small>Version 3 (Stable)</small>
-
-        #options-3
-          h2.page-header Options
-
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Attribute
-                th Type
-                th Description
-                th Values
-                th Default
-            tbody
-              tr
-                td state
-                td checked
-                td Boolean
-                td The checkbox state
-                td true, false
-                td true
-              tr
-                td size
-                td data-size
-                td String
-                td The checkbox state
-                td null, 'mini', 'small', 'normal', 'large'
-                td null
-              tr
-                td animate
-                td data-animate
-                td Boolean
-                td Animate the switch
-                td true, false
-                td true
-              tr
-                td disabled
-                td disabled
-                td Boolean
-                td Disable state
-                td true, false
-                td false
-              tr
-                td readonly
-                td readonly
-                td Boolean
-                td Readonly state
-                td true, false
-                td false
-              tr
-                td indeterminate
-                td Boolean
-                td indeterminate state
-                td true, false
-                td false
-              tr
-                td onColor
-                td data-on-color
-                td String
-                td Color of the left side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td 'primary'
-              tr
-                td offColor
-                td data-off-color
-                td String
-                td Color of the right side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td 'default'
-              tr
-                td onText
-                td data-on-text
-                td String
-                td Text of the left side of the switch
-                td String
-                td 'ON'
-              tr
-                td offText
-                td data-off-text
-                td String
-                td Text of the right side of the switch
-                td String
-                td 'OFF'
-              tr
-                td labelText
-                td data-label-text
-                td String
-                td Text of the center handle of the switch
-                td String
-                td '&amp;nbsp;'
-              tr
-                td baseClass
-                td data-base-class
-                td String
-                td Global class prefix
-                td String
-                td 'bootstrap-switch'
-              tr
-                td wrapperClass
-                td data-wrapper-class
-                td String | Array
-                td Container element class(es)
-                td String | Array
-                td 'wrapper'
-              tr
-                td onInit
-                td
-                td Function
-                td Callback function to execute on initialization
-                td Function
-                td: pre: code.javascript function(event, state) {}
-              tr
-                td onSwitchChange
-                td
-                td Function
-                td Callback function to execute on switch state change
-                td Function
-                td: pre: code.javascript function(event, state) {}
-
-          h3 Global Defaults Overriding
-
-          p Follow the jQuery convention to override the default options of the library. For instance:
-          pre
-            code
-              | $.fn.bootstrapSwitch.defaults.size = 'large';
-              | $.fn.bootstrapSwitch.defaults.onColor = 'success';
-
-        #methods-3
-          h2.page-header Methods
-
-          p In Bootstrap Switch, every option is also a method.
-          p If the second parameter is omitted, the method return the current value.
-          p You can invoke methods as follows:
-          pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
-
-          h3 Additional Methods
-
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Description
-            tbody
-              tr
-                td toggleState
-                td Toggle the switch state
-              tr
-                td toggleDisabled
-                td Toggle the disabled state
-              tr
-                td toggleReadonly
-                td Toggle the readonly state
-              tr
-                td destroy
-                td Destroy the instance of Bootstrap Switch
-
-          h3 Special Behaviours
-
-          ul
-            li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-            li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
-            li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.
-
-        #events-3
-          h2.page-header Events
-
-          p
-            | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-            | attach your handlers.<br>
-            | You can register to the emitted events as follow:
-
-          pre: code
-            | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-            |   console.log(this); // DOM element
-            |   console.log(event); // jQuery event
-            |   console.log(state); // true | false
-            | });
-
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Description
-                th Parameters
-            tbody
-              tr
-                td init
-                td Triggered on initialization. 'this' refers to the DOM element.
-                td
-                  | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
-              tr
-                td switchChange
-                td Triggered on switch state change. 'this' refers to the DOM element.
-                td
-                  | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-                  | state (true | false)
-
-        #examples-3
-          h2.page-header Examples
-
-          p To be included
-          //
-            h3 State
-            .row
-              .col-sm-6
-                input(type='checkbox', id='state-switch' checked)
-              .col-sm-6
-                .btn-group.pull-right
-                  button(type='button', id='state-switch-state', class='btn btn-default') Get State
-                  &nbsp;
-                  button(type='button', id='state-switch-on', class='btn btn-default') Set On
-                  &nbsp;
-                  button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-                  &nbsp;
-                  button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
-
-      #documentation-2
-        h1.page-header Documentation <small>version 2.0.1 (Legacy)</small>
-
-        #options-2
-          h2.page-header Options
-
-          .alert.alert-warning
-            p
-              | All the options are accepted only using <code>data-*</code> attributes on the element.<br>
-              | <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
-              | default HTML input attributes.<br>
-              | Therefore, there is not any way to specify the options in JavaScript during initialization.
-
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Type
-                th Description
-                th Values
-                th Default
-            tbody
-              tr
-                td state
-                td Boolean
-                td The checkbox state
-                td true, false
-                td 'checked' attribute or true
-              tr
-                td size
-                td String
-                td The checkbox state
-                td '', 'mini', 'small', 'normal', 'large'
-                td ''
-              tr
-                td animate
-                td Boolean
-                td Animate the switch
-                td true, false
-                td true
-              tr
-                td disabled
-                td Boolean
-                td Disable state
-                td true, false
-                td 'disabled' attribute or false
-              tr
-                td readonly
-                td Boolean
-                td Readonly state
-                td true, false
-                td 'readonly' attribute or false
-              tr
-                td on
-                td String
-                td Color of the left side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td null
-              tr
-                td off
-                td String
-                td Color of the right side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td null
-              tr
-                td on-label
-                td String
-                td Text of the left side of the switch
-                td String
-                td 'ON'
-              tr
-                td off-label
-                td String
-                td Text of the right side of the switch
-                td String
-                td 'OFF'
-              tr
-                td text-label
-                td String
-                td Text of the center handle of the switch
-                td String
-                td '&amp;nbsp;'
-              tr
-                td label-icon
-                td String
-                td Text of the center handle of the switch. Use to include external services icons
-                td String
-                td null
-
-        #methods-2
-          h2.page-header Methods
-
-          table.table.table-bordered.table-striped.table-responsive
-            thead
-              tr
-                th Name
-                th Description
-                th Accepted Values
-                th Returned Values
-            tbody
-              tr
-                td state
-                td Get checkbox state
-                td
-                td true, false
-              tr
-                td setState
-                td Set checkbox state
-                td (value: true, false)[, skip: true, <strong>false</strong>]
-                td jQuery Object (input element)
-              tr
-                td toggleState
-                td Toggle checkbox state
-                td [skip: true, <strong>false</strong>]
-                td jQuery Object (input element)
-              tr
-                td toggleRadioState
-                td Toggle radio state
-                td [skip: true, <strong>false</strong>]
-                td jQuery Object (input element)
-              tr
-                td toggleRadioStateAllowUncheck
-                td Toggle radio state allowing uncheck of the radio input
-                td [uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]
-                td jQuery Object (input element)
-              tr
-                td setSizeClass
-                td Set the size of the switch
-                td '', 'mini', 'small', 'normal', 'large'
-                td jQuery Object (input element)
-              tr
-                td setAnimated
-                td Animate the switch
-                td true, false
-                td jQuery Object (input element)
-              tr
-                td isDisabled
-                td Get disabled state
-                td
-                td true, false
-              tr
-                td setDisabled
-                td Set disable state
-                td true, false
-                td jQuery Object (input element)
-              tr
-                td toggleDisabled
-                td Toggle disabled state
-                td
-                td jQuery Object (input element)
-              tr
-                td isReadOnly
-                td Get Readonly state
-                td
-                td true, false
-              tr
-                td setReadOnly
-                td Set Readonly state
-                td true, false
-                td jQuery Object (input element)
-              tr
-                td toggleReadOnly
-                td Toggle readonly state
-                td
-                td jQuery Object (input element)
-              tr
-                td setOnClass
-                td Color of the left side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td jQuery Object (input element)
-              tr
-                td setOffClass
-                td Color of the right side of the switch
-                td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-                td jQuery Object (input element)
-              tr
-                td setOnLabel
-                td Text of the left side of the switch
-                td String
-                td jQuery Object (input element)
-              tr
-                td setOffLabel
-                td Text of the right side of the switch
-                td String
-                td jQuery Object (input element)
-              tr
-                td setTextLabel
-                td Text of the center handle of the switch
-                td String
-                td null
-              tr
-                td setTextIcon
-                td Text of the center handle of the switch. Use to include external services icons
-                td String
-                td null
-              tr
-                td destroy
-                td Destroy the instance of Bootstrap Switch
-                td
-                td jQuery Object (input element)
-
-        #events-2
-          h2.page-header Events
-
-          p
-            | The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
-            | <code>data</code>.<br>
-            | The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
-            | new input state)
-
-    script(src='docs/lib/js/jquery.min.js')
-    script(src='docs/lib/js/bootstrap.min.js')
-    script(src='docs/lib/js/highlight.js')
-    script(src='dist/js/bootstrap-switch.js')
-    script(src='docs/index.js')

docs/index.js

@@ -1,157 +0,0 @@
-$(function() {
-  var $window = $(window);
-  var $stateSwitch = $('#state-switch');
-  var sectionTop = $('.top').outerHeight() + 20;
-
-  // initialize highlight.js
-  hljs.initHighlightingOnLoad();
-
-  // navigation
-  $('a[href^="#"]').on('click', function(event) {
-    event.preventDefault();
-    var $target = $($(this).attr('href'));
-
-    if ($target.length) {
-      $window.scrollTop($target.offset().top - sectionTop);
-    }
-  });
-
-  $('input[name="download-version"]').on({
-    'init.bootstrapSwitch': function() {
-      $('#download-' + ($(this).is(':checked') ? '2' : '3')).hide();
-    },
-    'switchChange.bootstrapSwitch': function(event, state) {
-      $('#download-3')[state ? 'show' : 'hide']();
-      $('#download-2')[state ? 'hide' : 'show']();
-    }
-  });
-
-  // initialize all the inputs
-  $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
-
-  // state
-  $('#state-switch-toggle').on('click', function () {
-    $stateSwitch.bootstrapSwitch('toggleState');
-  });
-  $('#state-switch-on').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', true);
-  });
-  $('#state-switch-off').on('click', function () {
-    $stateSwitch.bootstrapSwitch('state', false);
-  });
-  $('#state-switch-state').on('click', function () {
-    alert($stateSwitch.bootstrapSwitch('state'));
-  });
-
-  /*
-  // dimension
-  $('#btn-size-regular-switch').on('click', function () {
-    $('#dimension-switch').bootstrapSwitch('size', '');
-  });
-  $('#btn-size-mini-switch').on('click', function () {
-    $('#dimension-switch').bootstrapSwitch('size', 'mini');
-  });
-  $('#btn-size-small-switch').on('click', function () {
-    $('#dimension-switch').bootstrapSwitch('size', 'small');
-  });
-  $('#btn-size-large-switch').on('click', function () {
-    $('#dimension-switch').bootstrapSwitch('size', 'large');
-  });
-
-
-
-  // destroy
-  $('#btn-destroy-switch').on('click', function () {
-    $('#destroy-switch').bootstrapSwitch('destroy');
-    $(this).remove();
-  });
-  // CREATE
-  $('#btn-create').on('click', function () {
-    $('#create-switch').bootstrapSwitch();
-    $(this).remove();
-  });
-
-  // activation
-  var $disable = $('#disable-switch');
-  $('#btn-disable-is').on('click', function () {
-    alert($disable.bootstrapSwitch('disabled'));
-  });
-  $('#btn-disable-toggle').on('click', function () {
-    $disable.bootstrapSwitch('toggleDisabled');
-  });
-  $('#btn-disable-set').on('click', function () {
-    $disable.bootstrapSwitch('disabled', true);
-  });
-  $('#btn-disable-remove').on('click', function () {
-    $disable.bootstrapSwitch('disabled', false);
-  });
-
-  // readonly
-  var $readonly = $('#readonly-switch');
-  $('#btn-readonly-is').on('click', function () {
-    alert($readonly.bootstrapSwitch('readonly'));
-  });
-  $('#btn-readonly-toggle').on('click', function () {
-    $readonly.bootstrapSwitch('toggleReadonly');
-  });
-  $('#btn-readonly-set').on('click', function () {
-    $readonly.bootstrapSwitch('readonly', true);
-  });
-  $('#btn-readonly-remove').on('click', function () {
-    $readonly.bootstrapSwitch('readonly', false);
-  });
-
-  // label
-  $('#btn-label-on-switch').on('click', function() {
-    $('#label-switch').bootstrapSwitch('onText', 'I');
-  });
-  $('#btn-label-off-switch').on('click', function() {
-    $('#label-switch').bootstrapSwitch('offText', 'O');
-  });
-
-  $('#label-toggle-switch').on('click', function(e, data) {
-    $('.label-toggle-switch').bootstrapSwitch('toggleState');
-  });
-  $('.label-toggle-switch').on('switch-change', function(e, data) {
-    alert(data.value);
-  });
-
-  // event handler
-  $('#events-switch').on({
-    init: function() {
-      console.log('Initialized!');
-    },
-    switchChange: function ($element, data) {
-      var $element = $(data.el),
-        value = data.value;
-
-      console.log(e, $element, value);
-    }
-  }).bootstrapSwitch();
-
-  // color
-  $('#btn-color-on-switch').on('click', function() {
-    $('#change-color-switch').bootstrapSwitch('onColor', 'success');
-  });
-  $('#btn-color-off-switch').on('click', function() {
-    $('#change-color-switch').bootstrapSwitch('offColor', 'danger');
-  });
-
-  // animation
-  $('#btn-animate-switch').on('click', function() {
-    $('#animated-switch').bootstrapSwitch('animate', true);
-  });
-  $('#btn-dont-animate-switch').on('click', function() {
-    $('#animated-switch').bootstrapSwitch('animate', false);
-  });
-
-  // radio
-  $('.radio1').on('switch-change', function () {
-    $('.radio1').bootstrapSwitch('toggleRadioState');
-  });
-  $('.radio2').on('switch-change', function () {
-    console.log("ok");
-    $('.radio2').bootstrapSwitch('toggleRadioState', true);
-  });
-  */
-});

docs/js/main.js

@@ -0,0 +1,45 @@
+$(function() {
+  var $window = $(window);
+  var $stateSwitch = $('#state-switch');
+  var sectionTop = $('.top').outerHeight() + 20;
+
+  // initialize highlight.js
+  hljs.initHighlightingOnLoad();
+
+  // navigation
+  $('a[href^="#"]').on('click', function(event) {
+    event.preventDefault();
+    var $target = $($(this).attr('href'));
+
+    if ($target.length) {
+      $window.scrollTop($target.offset().top - sectionTop);
+    }
+  });
+
+  $('input[name="download-version"]').on({
+    'init.bootstrapSwitch': function() {
+      $('#download-' + ($(this).is(':checked') ? '2' : '3')).hide();
+    },
+    'switchChange.bootstrapSwitch': function(event, state) {
+      $('#download-3')[state ? 'show' : 'hide']();
+      $('#download-2')[state ? 'hide' : 'show']();
+    }
+  });
+
+  // initialize all the inputs
+  $('input[type="checkbox"],[type="radio"]').not('#create-switch').not('#events-switch').bootstrapSwitch();
+
+  // state
+  $('#state-switch-toggle').on('click', function () {
+    $stateSwitch.bootstrapSwitch('toggleState');
+  });
+  $('#state-switch-on').on('click', function () {
+    $stateSwitch.bootstrapSwitch('state', true);
+  });
+  $('#state-switch-off').on('click', function () {
+    $stateSwitch.bootstrapSwitch('state', false);
+  });
+  $('#state-switch-state').on('click', function () {
+    alert($stateSwitch.bootstrapSwitch('state'));
+  });
+});

documentation-2.html

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="#new">What's new</a></li>
+            <li><a href="#start">Start</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
+                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+      <h1 class="page-header">Documentation 2.0.1 (Legacy)</h1>
+      <div id="options-2">
+        <h2 class="page-header">Options</h2>
+        <div class="alert alert-warning">
+          <p>
+            All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+            <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+            default HTML input attributes.<br>
+            Therefore, there is not any way to specify the options in JavaScript during initialization.
+          </p>
+        </div>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>state</td>
+              <td>Boolean</td>
+              <td>The checkbox state</td>
+              <td>true, false</td>
+              <td>'checked' attribute or true</td>
+            </tr>
+            <tr>
+              <td>size</td>
+              <td>String</td>
+              <td>The checkbox state</td>
+              <td>'', 'mini', 'small', 'normal', 'large'</td>
+              <td>''</td>
+            </tr>
+            <tr>
+              <td>animate</td>
+              <td>Boolean</td>
+              <td>Animate the switch</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>disabled</td>
+              <td>Boolean</td>
+              <td>Disable state</td>
+              <td>true, false</td>
+              <td>'disabled' attribute or false</td>
+            </tr>
+            <tr>
+              <td>readonly</td>
+              <td>Boolean</td>
+              <td>Readonly state</td>
+              <td>true, false</td>
+              <td>'readonly' attribute or false</td>
+            </tr>
+            <tr>
+              <td>on</td>
+              <td>String</td>
+              <td>Color of the left side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>off</td>
+              <td>String</td>
+              <td>Color of the right side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>on-label</td>
+              <td>String</td>
+              <td>Text of the left side of the switch</td>
+              <td>String</td>
+              <td>'ON'</td>
+            </tr>
+            <tr>
+              <td>off-label</td>
+              <td>String</td>
+              <td>Text of the right side of the switch</td>
+              <td>String</td>
+              <td>'OFF'</td>
+            </tr>
+            <tr>
+              <td>text-label</td>
+              <td>String</td>
+              <td>Text of the center handle of the switch</td>
+              <td>String</td>
+              <td>'&amp;nbsp;'</td>
+            </tr>
+            <tr>
+              <td>label-icon</td>
+              <td>String</td>
+              <td>Text of the center handle of the switch. Use to include external services icons</td>
+              <td>String</td>
+              <td>null</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div id="methods-2">
+        <h2 class="page-header">Methods</h2>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Accepted Values</th>
+              <th>Returned Values</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>state</td>
+              <td>Get checkbox state</td>
+              <td></td>
+              <td>true, false</td>
+            </tr>
+            <tr>
+              <td>setState</td>
+              <td>Set checkbox state</td>
+              <td>(value: true, false)[, skip: true, <strong>false</strong>]</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>toggleState</td>
+              <td>Toggle checkbox state</td>
+              <td>[skip: true, <strong>false</strong>]</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>toggleRadioState</td>
+              <td>Toggle radio state</td>
+              <td>[skip: true, <strong>false</strong>]</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>toggleRadioStateAllowUncheck</td>
+              <td>Toggle radio state allowing uncheck of the radio input</td>
+              <td>[uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setSizeClass</td>
+              <td>Set the size of the switch</td>
+              <td>'', 'mini', 'small', 'normal', 'large'</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setAnimated</td>
+              <td>Animate the switch</td>
+              <td>true, false</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>isDisabled</td>
+              <td>Get disabled state</td>
+              <td></td>
+              <td>true, false</td>
+            </tr>
+            <tr>
+              <td>setDisabled</td>
+              <td>Set disable state</td>
+              <td>true, false</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>toggleDisabled</td>
+              <td>Toggle disabled state</td>
+              <td></td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>isReadOnly</td>
+              <td>Get Readonly state</td>
+              <td></td>
+              <td>true, false</td>
+            </tr>
+            <tr>
+              <td>setReadOnly</td>
+              <td>Set Readonly state</td>
+              <td>true, false</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>toggleReadOnly</td>
+              <td>Toggle readonly state</td>
+              <td></td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setOnClass</td>
+              <td>Color of the left side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setOffClass</td>
+              <td>Color of the right side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setOnLabel</td>
+              <td>Text of the left side of the switch</td>
+              <td>String</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setOffLabel</td>
+              <td>Text of the right side of the switch</td>
+              <td>String</td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+            <tr>
+              <td>setTextLabel</td>
+              <td>Text of the center handle of the switch</td>
+              <td>String</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>setTextIcon</td>
+              <td>Text of the center handle of the switch. Use to include external services icons</td>
+              <td>String</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>destroy</td>
+              <td>Destroy the instance of Bootstrap Switch</td>
+              <td></td>
+              <td>jQuery Object (input element)</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div id="events-2">
+        <h2 class="page-header">Events</h2>
+        <p>
+          The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+          <code>data</code>.<br>
+          The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+          new input state)
+        </p>
+      </div>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

documentation-3.html

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="#new">What's new</a></li>
+            <li><a href="#start">Start</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
+                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+      <h1 class="page-header">Documentation 3 (Stable)</h1>
+      <div id="options-3">
+        <h2 class="page-header">Options</h2>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Attribute</th>
+              <th>Type</th>
+              <th>Description</th>
+              <th>Values</th>
+              <th>Default</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>state</td>
+              <td>checked</td>
+              <td>Boolean</td>
+              <td>The checkbox state</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>size</td>
+              <td>data-size</td>
+              <td>String</td>
+              <td>The checkbox state</td>
+              <td>null, 'mini', 'small', 'normal', 'large'</td>
+              <td>null</td>
+            </tr>
+            <tr>
+              <td>animate</td>
+              <td>data-animate</td>
+              <td>Boolean</td>
+              <td>Animate the switch</td>
+              <td>true, false</td>
+              <td>true</td>
+            </tr>
+            <tr>
+              <td>disabled</td>
+              <td>disabled</td>
+              <td>Boolean</td>
+              <td>Disable state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>readonly</td>
+              <td>readonly</td>
+              <td>Boolean</td>
+              <td>Readonly state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>indeterminate</td>
+              <td>Boolean</td>
+              <td>indeterminate state</td>
+              <td>true, false</td>
+              <td>false</td>
+            </tr>
+            <tr>
+              <td>onColor</td>
+              <td>data-on-color</td>
+              <td>String</td>
+              <td>Color of the left side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'primary'</td>
+            </tr>
+            <tr>
+              <td>offColor</td>
+              <td>data-off-color</td>
+              <td>String</td>
+              <td>Color of the right side of the switch</td>
+              <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
+              <td>'default'</td>
+            </tr>
+            <tr>
+              <td>onText</td>
+              <td>data-on-text</td>
+              <td>String</td>
+              <td>Text of the left side of the switch</td>
+              <td>String</td>
+              <td>'ON'</td>
+            </tr>
+            <tr>
+              <td>offText</td>
+              <td>data-off-text</td>
+              <td>String</td>
+              <td>Text of the right side of the switch</td>
+              <td>String</td>
+              <td>'OFF'</td>
+            </tr>
+            <tr>
+              <td>labelText</td>
+              <td>data-label-text</td>
+              <td>String</td>
+              <td>Text of the center handle of the switch</td>
+              <td>String</td>
+              <td>'&amp;nbsp;'</td>
+            </tr>
+            <tr>
+              <td>baseClass</td>
+              <td>data-base-class</td>
+              <td>String</td>
+              <td>Global class prefix</td>
+              <td>String</td>
+              <td>'bootstrap-switch'</td>
+            </tr>
+            <tr>
+              <td>wrapperClass</td>
+              <td>data-wrapper-class</td>
+              <td>String | Array</td>
+              <td>Container element class(es)</td>
+              <td>String | Array</td>
+              <td>'wrapper'</td>
+            </tr>
+            <tr>
+              <td>onInit</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on initialization</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+            <tr>
+              <td>onSwitchChange</td>
+              <td></td>
+              <td>Function</td>
+              <td>Callback function to execute on switch state change</td>
+              <td>Function</td>
+              <td>
+                <pre><code class="javascript">function(event, state) {}</code></pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <h3>Global Defaults Overriding</h3>
+        <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
+        <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
+$.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
+      </div>
+      <div id="methods-3">
+        <h2 class="page-header">Methods</h2>
+        <p>In Bootstrap Switch, every option is also a method.</p>
+        <p>If the second parameter is omitted, the method return the current value.</p>
+        <p>You can invoke methods as follows:</p>
+        <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
+        <h3>Additional Methods</h3>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>toggleState</td>
+              <td>Toggle the switch state</td>
+            </tr>
+            <tr>
+              <td>toggleDisabled</td>
+              <td>Toggle the disabled state</td>
+            </tr>
+            <tr>
+              <td>toggleReadonly</td>
+              <td>Toggle the readonly state</td>
+            </tr>
+            <tr>
+              <td>destroy</td>
+              <td>Destroy the instance of Bootstrap Switch</td>
+            </tr>
+          </tbody>
+        </table>
+        <h3>Special Behaviours</h3>
+        <ul>
+          <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
+          <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
+        </ul>
+      </div>
+      <div id="events-3">
+        <h2 class="page-header">Events</h2>
+        <p>
+          All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+          attach your handlers.<br>
+          You can register to the emitted events as follow:
+        </p>
+        <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+  console.log(this); // DOM element
+  console.log(event); // jQuery event
+  console.log(state); // true | false
+});</code></pre>
+        <table class="table table-bordered table-striped table-responsive">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Description</th>
+              <th>Parameters</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>init</td>
+              <td>Triggered on initialization. 'this' refers to the DOM element.</td>
+              <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
+            </tr>
+            <tr>
+              <td>switchChange</td>
+              <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
+              <td>
+                event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+                state (true | false)
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div id="examples-3">
+        <h2 class="page-header">Examples</h2>
+        <p>To be included</p>
+        <!--
+        h3 State
+        .row
+          .col-sm-6
+            input(type='checkbox', id='state-switch' checked)
+          .col-sm-6
+            .btn-group.pull-right
+              button(type='button', id='state-switch-state', class='btn btn-default') Get State
+              &nbsp;
+              button(type='button', id='state-switch-on', class='btn btn-default') Set On
+              &nbsp;
+              button(type='button', id='state-switch-off', class='btn btn-default') Set Off
+              &nbsp;
+              button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
+        -->
+      </div>
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

gulpfile.coffee

@@ -5,7 +5,7 @@ name = pkg.name
 
 SOURCE_PATH = './src'
 DIST_PATH = './dist'
-DOCS_PATH = './docs'
+DOCS_PATH = "./docs"
 SERVER_HOST = 'localhost'
 SERVER_PORT = 3000
 BANNER = """
@@ -78,7 +78,7 @@ gulp.task 'less-bootstrap3', ->
 
 gulp.task 'docs', ->
   gulp
-  .src "#{DOCS_PATH}/index.jade"
+  .src "#{SOURCE_PATH}/docs/*.jade"
   .pipe plugins.changed './'
   .pipe plugins.jade pretty: true
   .pipe gulp.dest './'
@@ -99,11 +99,11 @@ gulp.task 'watch', ['connect'], ->
   gulp.watch "#{SOURCE_PATH}/coffee/#{name}.coffee", ['coffee']
   gulp.watch "#{SOURCE_PATH}/less/bootstrap2/*.less", ['less-bootstrap2']
   gulp.watch "#{SOURCE_PATH}/less/bootstrap3/*.less", ['less-bootstrap3']
-  gulp.watch "#{DOCS_PATH}/index.jade", ['docs']
+  gulp.watch "#{SOURCE_PATH}/docs/*.jade", ['docs']
   gulp.watch [
     "#{DIST_PATH}/js/**/*.js"
     "#{DIST_PATH}/css/**/*.css"
-    './index.html'
+    './*.html'
   ]
   .on 'change', (event) ->
     gulp.src event.path

index.html

@@ -8,10 +8,10 @@
     <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
     <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
     <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
-    <link href="docs/lib/css/bootstrap.min.css" rel="stylesheet">
-    <link href="docs/lib/css/highlight.css" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
     <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
-    <link href="docs/index.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
     <script>
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-43092768-1']);
@@ -44,15 +44,8 @@
             <li><a href="#start">Start</a></li>
             <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
               <ul class="dropdown-menu">
-                <li class="dropdown-header">Version 3 (Stable)</li>
-                <li><a href="#options-3">Options</a></li>
-                <li><a href="#methods-3">Methods</a></li>
-                <li><a href="#events-3">Events</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
-                <li><a href="#options-2">Options</a></li>
-                <li><a href="#methods-2">Methods</a></li>
-                <li><a href="#events-2">Events</a></li>
+                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
+                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
               </ul>
             </li>
             <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
@@ -60,7 +53,7 @@
         </nav>
       </div>
     </header>
-    <div class="container">
+    <div class="container content">
       <div class="header">
         <h2 class="title">Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span></h2>
         <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
@@ -113,503 +106,21 @@
         <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
         <p>Enjoy.</p>
       </div>
-      <div id="documentation-3">
-        <h1 class="page-header">Documentation <small>Version 3 (Stable)</small></h1>
-        <div id="options-3">
-          <h2 class="page-header">Options</h2>
-          <table class="table table-bordered table-striped table-responsive">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Attribute</th>
-                <th>Type</th>
-                <th>Description</th>
-                <th>Values</th>
-                <th>Default</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>state</td>
-                <td>checked</td>
-                <td>Boolean</td>
-                <td>The checkbox state</td>
-                <td>true, false</td>
-                <td>true</td>
-              </tr>
-              <tr>
-                <td>size</td>
-                <td>data-size</td>
-                <td>String</td>
-                <td>The checkbox state</td>
-                <td>null, 'mini', 'small', 'normal', 'large'</td>
-                <td>null</td>
-              </tr>
-              <tr>
-                <td>animate</td>
-                <td>data-animate</td>
-                <td>Boolean</td>
-                <td>Animate the switch</td>
-                <td>true, false</td>
-                <td>true</td>
-              </tr>
-              <tr>
-                <td>disabled</td>
-                <td>disabled</td>
-                <td>Boolean</td>
-                <td>Disable state</td>
-                <td>true, false</td>
-                <td>false</td>
-              </tr>
-              <tr>
-                <td>readonly</td>
-                <td>readonly</td>
-                <td>Boolean</td>
-                <td>Readonly state</td>
-                <td>true, false</td>
-                <td>false</td>
-              </tr>
-              <tr>
-                <td>indeterminate</td>
-                <td>Boolean</td>
-                <td>indeterminate state</td>
-                <td>true, false</td>
-                <td>false</td>
-              </tr>
-              <tr>
-                <td>onColor</td>
-                <td>data-on-color</td>
-                <td>String</td>
-                <td>Color of the left side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>'primary'</td>
-              </tr>
-              <tr>
-                <td>offColor</td>
-                <td>data-off-color</td>
-                <td>String</td>
-                <td>Color of the right side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>'default'</td>
-              </tr>
-              <tr>
-                <td>onText</td>
-                <td>data-on-text</td>
-                <td>String</td>
-                <td>Text of the left side of the switch</td>
-                <td>String</td>
-                <td>'ON'</td>
-              </tr>
-              <tr>
-                <td>offText</td>
-                <td>data-off-text</td>
-                <td>String</td>
-                <td>Text of the right side of the switch</td>
-                <td>String</td>
-                <td>'OFF'</td>
-              </tr>
-              <tr>
-                <td>labelText</td>
-                <td>data-label-text</td>
-                <td>String</td>
-                <td>Text of the center handle of the switch</td>
-                <td>String</td>
-                <td>'&amp;nbsp;'</td>
-              </tr>
-              <tr>
-                <td>baseClass</td>
-                <td>data-base-class</td>
-                <td>String</td>
-                <td>Global class prefix</td>
-                <td>String</td>
-                <td>'bootstrap-switch'</td>
-              </tr>
-              <tr>
-                <td>wrapperClass</td>
-                <td>data-wrapper-class</td>
-                <td>String | Array</td>
-                <td>Container element class(es)</td>
-                <td>String | Array</td>
-                <td>'wrapper'</td>
-              </tr>
-              <tr>
-                <td>onInit</td>
-                <td></td>
-                <td>Function</td>
-                <td>Callback function to execute on initialization</td>
-                <td>Function</td>
-                <td>
-                  <pre><code class="javascript">function(event, state) {}</code></pre>
-                </td>
-              </tr>
-              <tr>
-                <td>onSwitchChange</td>
-                <td></td>
-                <td>Function</td>
-                <td>Callback function to execute on switch state change</td>
-                <td>Function</td>
-                <td>
-                  <pre><code class="javascript">function(event, state) {}</code></pre>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <h3>Global Defaults Overriding</h3>
-          <p>Follow the jQuery convention to override the default options of the library. For instance:</p>
-          <pre><code>$.fn.bootstrapSwitch.defaults.size = 'large';
-$.fn.bootstrapSwitch.defaults.onColor = 'success';</code></pre>
-        </div>
-        <div id="methods-3">
-          <h2 class="page-header">Methods</h2>
-          <p>In Bootstrap Switch, every option is also a method.</p>
-          <p>If the second parameter is omitted, the method return the current value.</p>
-          <p>You can invoke methods as follows:</p>
-          <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);</code></pre>
-          <h3>Additional Methods</h3>
-          <table class="table table-bordered table-striped table-responsive">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>toggleState</td>
-                <td>Toggle the switch state</td>
-              </tr>
-              <tr>
-                <td>toggleDisabled</td>
-                <td>Toggle the disabled state</td>
-              </tr>
-              <tr>
-                <td>toggleReadonly</td>
-                <td>Toggle the readonly state</td>
-              </tr>
-              <tr>
-                <td>destroy</td>
-                <td>Destroy the instance of Bootstrap Switch</td>
-              </tr>
-            </tbody>
-          </table>
-          <h3>Special Behaviours</h3>
-          <ul>
-            <li>The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-            <li>The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.</li>
-            <li>The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.</li>
-          </ul>
-        </div>
-        <div id="events-3">
-          <h2 class="page-header">Events</h2>
-          <p>
-            All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
-            attach your handlers.<br>
-            You can register to the emitted events as follow:
-          </p>
-          <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
-  console.log(this); // DOM element
-  console.log(event); // jQuery event
-  console.log(state); // true | false
-});</code></pre>
-          <table class="table table-bordered table-striped table-responsive">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-                <th>Parameters</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>init</td>
-                <td>Triggered on initialization. 'this' refers to the DOM element.</td>
-                <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
-              </tr>
-              <tr>
-                <td>switchChange</td>
-                <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
-                <td>
-                  event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
-                  state (true | false)
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div id="examples-3">
-          <h2 class="page-header">Examples</h2>
-          <p>To be included</p>
-          <!--
-          h3 State
-          .row
-            .col-sm-6
-              input(type='checkbox', id='state-switch' checked)
-            .col-sm-6
-              .btn-group.pull-right
-                button(type='button', id='state-switch-state', class='btn btn-default') Get State
-                &nbsp;
-                button(type='button', id='state-switch-on', class='btn btn-default') Set On
-                &nbsp;
-                button(type='button', id='state-switch-off', class='btn btn-default') Set Off
-                &nbsp;
-                button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
-                
-          -->
-        </div>
-      </div>
-      <div id="documentation-2">
-        <h1 class="page-header">Documentation <small>version 2.0.1 (Legacy)</small></h1>
-        <div id="options-2">
-          <h2 class="page-header">Options</h2>
-          <div class="alert alert-warning">
-            <p>
-              All the options are accepted only using <code>data-*</code> attributes on the element.<br>
-              <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
-              default HTML input attributes.<br>
-              Therefore, there is not any way to specify the options in JavaScript during initialization.
-            </p>
-          </div>
-          <table class="table table-bordered table-striped table-responsive">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Description</th>
-                <th>Values</th>
-                <th>Default</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>state</td>
-                <td>Boolean</td>
-                <td>The checkbox state</td>
-                <td>true, false</td>
-                <td>'checked' attribute or true</td>
-              </tr>
-              <tr>
-                <td>size</td>
-                <td>String</td>
-                <td>The checkbox state</td>
-                <td>'', 'mini', 'small', 'normal', 'large'</td>
-                <td>''</td>
-              </tr>
-              <tr>
-                <td>animate</td>
-                <td>Boolean</td>
-                <td>Animate the switch</td>
-                <td>true, false</td>
-                <td>true</td>
-              </tr>
-              <tr>
-                <td>disabled</td>
-                <td>Boolean</td>
-                <td>Disable state</td>
-                <td>true, false</td>
-                <td>'disabled' attribute or false</td>
-              </tr>
-              <tr>
-                <td>readonly</td>
-                <td>Boolean</td>
-                <td>Readonly state</td>
-                <td>true, false</td>
-                <td>'readonly' attribute or false</td>
-              </tr>
-              <tr>
-                <td>on</td>
-                <td>String</td>
-                <td>Color of the left side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>null</td>
-              </tr>
-              <tr>
-                <td>off</td>
-                <td>String</td>
-                <td>Color of the right side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>null</td>
-              </tr>
-              <tr>
-                <td>on-label</td>
-                <td>String</td>
-                <td>Text of the left side of the switch</td>
-                <td>String</td>
-                <td>'ON'</td>
-              </tr>
-              <tr>
-                <td>off-label</td>
-                <td>String</td>
-                <td>Text of the right side of the switch</td>
-                <td>String</td>
-                <td>'OFF'</td>
-              </tr>
-              <tr>
-                <td>text-label</td>
-                <td>String</td>
-                <td>Text of the center handle of the switch</td>
-                <td>String</td>
-                <td>'&amp;nbsp;'</td>
-              </tr>
-              <tr>
-                <td>label-icon</td>
-                <td>String</td>
-                <td>Text of the center handle of the switch. Use to include external services icons</td>
-                <td>String</td>
-                <td>null</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div id="methods-2">
-          <h2 class="page-header">Methods</h2>
-          <table class="table table-bordered table-striped table-responsive">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Description</th>
-                <th>Accepted Values</th>
-                <th>Returned Values</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>state</td>
-                <td>Get checkbox state</td>
-                <td></td>
-                <td>true, false</td>
-              </tr>
-              <tr>
-                <td>setState</td>
-                <td>Set checkbox state</td>
-                <td>(value: true, false)[, skip: true, <strong>false</strong>]</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>toggleState</td>
-                <td>Toggle checkbox state</td>
-                <td>[skip: true, <strong>false</strong>]</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>toggleRadioState</td>
-                <td>Toggle radio state</td>
-                <td>[skip: true, <strong>false</strong>]</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>toggleRadioStateAllowUncheck</td>
-                <td>Toggle radio state allowing uncheck of the radio input</td>
-                <td>[uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setSizeClass</td>
-                <td>Set the size of the switch</td>
-                <td>'', 'mini', 'small', 'normal', 'large'</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setAnimated</td>
-                <td>Animate the switch</td>
-                <td>true, false</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>isDisabled</td>
-                <td>Get disabled state</td>
-                <td></td>
-                <td>true, false</td>
-              </tr>
-              <tr>
-                <td>setDisabled</td>
-                <td>Set disable state</td>
-                <td>true, false</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>toggleDisabled</td>
-                <td>Toggle disabled state</td>
-                <td></td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>isReadOnly</td>
-                <td>Get Readonly state</td>
-                <td></td>
-                <td>true, false</td>
-              </tr>
-              <tr>
-                <td>setReadOnly</td>
-                <td>Set Readonly state</td>
-                <td>true, false</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>toggleReadOnly</td>
-                <td>Toggle readonly state</td>
-                <td></td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setOnClass</td>
-                <td>Color of the left side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setOffClass</td>
-                <td>Color of the right side of the switch</td>
-                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setOnLabel</td>
-                <td>Text of the left side of the switch</td>
-                <td>String</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setOffLabel</td>
-                <td>Text of the right side of the switch</td>
-                <td>String</td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-              <tr>
-                <td>setTextLabel</td>
-                <td>Text of the center handle of the switch</td>
-                <td>String</td>
-                <td>null</td>
-              </tr>
-              <tr>
-                <td>setTextIcon</td>
-                <td>Text of the center handle of the switch. Use to include external services icons</td>
-                <td>String</td>
-                <td>null</td>
-              </tr>
-              <tr>
-                <td>destroy</td>
-                <td>Destroy the instance of Bootstrap Switch</td>
-                <td></td>
-                <td>jQuery Object (input element)</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div id="events-2">
-          <h2 class="page-header">Events</h2>
-          <p>
-            The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
-            <code>data</code>.<br>
-            The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
-            new input state)
-          </p>
-        </div>
-      </div>
     </div>
-    <script src="docs/lib/js/jquery.min.js"></script>
-    <script src="docs/lib/js/bootstrap.min.js"></script>
-    <script src="docs/lib/js/highlight.js"></script>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
     <script src="dist/js/bootstrap-switch.js"></script>
-    <script src="docs/index.js"></script>
+    <script src="docs/js/main.js"></script>
   </body>
 </html>

main.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="#new">What's new</a></li>
+            <li><a href="#start">Start</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
+                <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <div class="container content">
+    </div>
+    <div class="container bottom">
+      <p>
+        Licensed under the
+        <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        · Created by
+        <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        · Mantained by
+        <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+      </p>
+    </div>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

page.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
+    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
+    <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link href="docs/css/bootstrap.min.css" rel="stylesheet">
+    <link href="docs/css/highlight.css" rel="stylesheet">
+    <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
+    <link href="docs/css/main.css" rel="stylesheet">
+    <script>
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+    </script>
+  </head>
+  <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
+        </div>
+        <nav id="collapse" role="navigation" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
+                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
+              </ul>
+            </li>
+            <li><a href="#new">What's new</a></li>
+            <li><a href="#start">Start</a></li>
+            <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
+              <ul class="dropdown-menu">
+                <li class="dropdown-header">Version 3 (Stable)</li>
+                <li><a href="#options-3">Options</a></li>
+                <li><a href="#methods-3">Methods</a></li>
+                <li><a href="#events-3">Events</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Version 2.0.1 (Legacy)</li>
+                <li><a href="#options-2">Options</a></li>
+                <li><a href="#methods-2">Methods</a></li>
+                <li><a href="#events-2">Events</a></li>
+              </ul>
+            </li>
+            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <p>try</p>
+    <script src="docs/js/jquery.min.js"></script>
+    <script src="docs/js/bootstrap.min.js"></script>
+    <script src="docs/js/highlight.js"></script>
+    <script src="dist/js/bootstrap-switch.js"></script>
+    <script src="docs/js/main.js"></script>
+  </body>
+</html>

src/docs/documentation-2.jade

@@ -0,0 +1,211 @@
+extends main
+
+block content
+  h1.page-header Documentation 2.0.1 (Legacy)
+
+  #options-2
+    h2.page-header Options
+
+    .alert.alert-warning
+      p
+        | All the options are accepted only using <code>data-*</code> attributes on the element.<br>
+        | <code>checked</code>, <code>disabled</code> and <code>readonly</code> are exception to the rule, being
+        | default HTML input attributes.<br>
+        | Therefore, there is not any way to specify the options in JavaScript during initialization.
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Type
+          th Description
+          th Values
+          th Default
+      tbody
+        tr
+          td state
+          td Boolean
+          td The checkbox state
+          td true, false
+          td 'checked' attribute or true
+        tr
+          td size
+          td String
+          td The checkbox state
+          td '', 'mini', 'small', 'normal', 'large'
+          td ''
+        tr
+          td animate
+          td Boolean
+          td Animate the switch
+          td true, false
+          td true
+        tr
+          td disabled
+          td Boolean
+          td Disable state
+          td true, false
+          td 'disabled' attribute or false
+        tr
+          td readonly
+          td Boolean
+          td Readonly state
+          td true, false
+          td 'readonly' attribute or false
+        tr
+          td on
+          td String
+          td Color of the left side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td null
+        tr
+          td off
+          td String
+          td Color of the right side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td null
+        tr
+          td on-label
+          td String
+          td Text of the left side of the switch
+          td String
+          td 'ON'
+        tr
+          td off-label
+          td String
+          td Text of the right side of the switch
+          td String
+          td 'OFF'
+        tr
+          td text-label
+          td String
+          td Text of the center handle of the switch
+          td String
+          td '&amp;nbsp;'
+        tr
+          td label-icon
+          td String
+          td Text of the center handle of the switch. Use to include external services icons
+          td String
+          td null
+
+  #methods-2
+    h2.page-header Methods
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Description
+          th Accepted Values
+          th Returned Values
+      tbody
+        tr
+          td state
+          td Get checkbox state
+          td
+          td true, false
+        tr
+          td setState
+          td Set checkbox state
+          td (value: true, false)[, skip: true, <strong>false</strong>]
+          td jQuery Object (input element)
+        tr
+          td toggleState
+          td Toggle checkbox state
+          td [skip: true, <strong>false</strong>]
+          td jQuery Object (input element)
+        tr
+          td toggleRadioState
+          td Toggle radio state
+          td [skip: true, <strong>false</strong>]
+          td jQuery Object (input element)
+        tr
+          td toggleRadioStateAllowUncheck
+          td Toggle radio state allowing uncheck of the radio input
+          td [uncheck: true, <strong>false</strong> | skip: true, <strong>false</strong>]
+          td jQuery Object (input element)
+        tr
+          td setSizeClass
+          td Set the size of the switch
+          td '', 'mini', 'small', 'normal', 'large'
+          td jQuery Object (input element)
+        tr
+          td setAnimated
+          td Animate the switch
+          td true, false
+          td jQuery Object (input element)
+        tr
+          td isDisabled
+          td Get disabled state
+          td
+          td true, false
+        tr
+          td setDisabled
+          td Set disable state
+          td true, false
+          td jQuery Object (input element)
+        tr
+          td toggleDisabled
+          td Toggle disabled state
+          td
+          td jQuery Object (input element)
+        tr
+          td isReadOnly
+          td Get Readonly state
+          td
+          td true, false
+        tr
+          td setReadOnly
+          td Set Readonly state
+          td true, false
+          td jQuery Object (input element)
+        tr
+          td toggleReadOnly
+          td Toggle readonly state
+          td
+          td jQuery Object (input element)
+        tr
+          td setOnClass
+          td Color of the left side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td jQuery Object (input element)
+        tr
+          td setOffClass
+          td Color of the right side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td jQuery Object (input element)
+        tr
+          td setOnLabel
+          td Text of the left side of the switch
+          td String
+          td jQuery Object (input element)
+        tr
+          td setOffLabel
+          td Text of the right side of the switch
+          td String
+          td jQuery Object (input element)
+        tr
+          td setTextLabel
+          td Text of the center handle of the switch
+          td String
+          td null
+        tr
+          td setTextIcon
+          td Text of the center handle of the switch. Use to include external services icons
+          td String
+          td null
+        tr
+          td destroy
+          td Destroy the instance of Bootstrap Switch
+          td
+          td jQuery Object (input element)
+
+  #events-2
+    h2.page-header Events
+
+    p
+      | The only event triggered it <code>switch-change</code>. It returns two parameters: <code>event</code> and
+      | <code>data</code>.<br>
+      | The latter is an object that include <code>el</code> (the input DOM element) and <code>value</code> (the
+      | new input state)

src/docs/documentation-3.jade

@@ -0,0 +1,219 @@
+extends main
+
+block content
+  h1.page-header Documentation 3 (Stable)
+
+  #options-3
+    h2.page-header Options
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Attribute
+          th Type
+          th Description
+          th Values
+          th Default
+      tbody
+        tr
+          td state
+          td checked
+          td Boolean
+          td The checkbox state
+          td true, false
+          td true
+        tr
+          td size
+          td data-size
+          td String
+          td The checkbox state
+          td null, 'mini', 'small', 'normal', 'large'
+          td null
+        tr
+          td animate
+          td data-animate
+          td Boolean
+          td Animate the switch
+          td true, false
+          td true
+        tr
+          td disabled
+          td disabled
+          td Boolean
+          td Disable state
+          td true, false
+          td false
+        tr
+          td readonly
+          td readonly
+          td Boolean
+          td Readonly state
+          td true, false
+          td false
+        tr
+          td indeterminate
+          td Boolean
+          td indeterminate state
+          td true, false
+          td false
+        tr
+          td onColor
+          td data-on-color
+          td String
+          td Color of the left side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td 'primary'
+        tr
+          td offColor
+          td data-off-color
+          td String
+          td Color of the right side of the switch
+          td 'primary', 'info', 'success', 'warning', 'danger', 'default'
+          td 'default'
+        tr
+          td onText
+          td data-on-text
+          td String
+          td Text of the left side of the switch
+          td String
+          td 'ON'
+        tr
+          td offText
+          td data-off-text
+          td String
+          td Text of the right side of the switch
+          td String
+          td 'OFF'
+        tr
+          td labelText
+          td data-label-text
+          td String
+          td Text of the center handle of the switch
+          td String
+          td ' '
+        tr
+          td baseClass
+          td data-base-class
+          td String
+          td Global class prefix
+          td String
+          td 'bootstrap-switch'
+        tr
+          td wrapperClass
+          td data-wrapper-class
+          td String | Array
+          td Container element class(es)
+          td String | Array
+          td 'wrapper'
+        tr
+          td onInit
+          td
+          td Function
+          td Callback function to execute on initialization
+          td Function
+          td: pre: code.javascript function(event, state) {}
+        tr
+          td onSwitchChange
+          td
+          td Function
+          td Callback function to execute on switch state change
+          td Function
+          td: pre: code.javascript function(event, state) {}
+
+    h3 Global Defaults Overriding
+
+    p Follow the jQuery convention to override the default options of the library. For instance:
+    pre
+      code
+        | $.fn.bootstrapSwitch.defaults.size = 'large';
+        | $.fn.bootstrapSwitch.defaults.onColor = 'success';
+
+  #methods-3
+    h2.page-header Methods
+
+    p In Bootstrap Switch, every option is also a method.
+    p If the second parameter is omitted, the method return the current value.
+    p You can invoke methods as follows:
+    pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);
+
+    h3 Additional Methods
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Description
+      tbody
+        tr
+          td toggleState
+          td Toggle the switch state
+        tr
+          td toggleDisabled
+          td Toggle the disabled state
+        tr
+          td toggleReadonly
+          td Toggle the readonly state
+        tr
+          td destroy
+          td Destroy the instance of Bootstrap Switch
+
+    h3 Special Behaviours
+
+    ul
+      li The method <code>state</code> can receive an optional third parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+      li The method <code>toggleState</code> can receive an optional second parameter <code>skip</code>. if true, <code>switchChange</code> event is not executed. The default is false.
+      li The method <code>wrapperClass</code> can accepts a falsy value as second parameter. If so, it resets the class to its default.
+
+  #events-3
+    h2.page-header Events
+
+    p
+      | All the events are namespaced, therefore always append <code>.bootstrapSwitch</code> when you
+      | attach your handlers.<br>
+      | You can register to the emitted events as follow:
+
+    pre: code
+      | $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
+      |   console.log(this); // DOM element
+      |   console.log(event); // jQuery event
+      |   console.log(state); // true | false
+      | });
+
+    table.table.table-bordered.table-striped.table-responsive
+      thead
+        tr
+          th Name
+          th Description
+          th Parameters
+      tbody
+        tr
+          td init
+          td Triggered on initialization. 'this' refers to the DOM element.
+          td
+            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)
+        tr
+          td switchChange
+          td Triggered on switch state change. 'this' refers to the DOM element.
+          td
+            | event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
+            | state (true | false)
+
+  #examples-3
+    h2.page-header Examples
+
+    p To be included
+    //
+      h3 State
+      .row
+        .col-sm-6
+          input(type='checkbox', id='state-switch' checked)
+        .col-sm-6
+          .btn-group.pull-right
+            button(type='button', id='state-switch-state', class='btn btn-default') Get State
+            &nbsp;
+            button(type='button', id='state-switch-on', class='btn btn-default') Set On
+            &nbsp;
+            button(type='button', id='state-switch-off', class='btn btn-default') Set Off
+            &nbsp;
+            button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State

src/docs/index.jade

@@ -0,0 +1,64 @@
+extends main
+
+block content
+  .header
+    h2.title Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span>
+
+    p.lead Turn checkboxes and radio buttons in toggle switches.
+    p Select the version to download:
+    p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3', data-off-text='2.0.1')
+    p
+      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-3', class='btn btn-lg btn-primary') Download 3
+      a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
+    br
+    br
+    iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='184', height='30')
+    iframe(src='http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true&size=large', allowtransparency='true', frameborder='0', scrolling='0', width='144', height='30')
+    br
+    br
+    br
+
+  .alert.alert-info
+    p
+      | <strong>Documentation in progress!</strong><br>
+      | It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
+      | understandable as possible.<br>
+      | If you feel there is something missing, submit a
+      | <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
+      | help is needed. Many thanks.
+
+  #new
+    h1.page-header What's new in version 3
+
+    ul
+      li API redesign for a more intuitive use
+      li Entire code source rewriting focused on cleanliness and performance
+      li Initialization options can be passed as JavaScript object or written as <code>data-*</code>
+      li Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code>
+      li Plugin instance publicly available calling <code>.data('bootstrap-switch')</code>
+      li Global overridable defaults options
+      li Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options
+      li New <code>onInit</code> event
+      li Event namespacing
+      li Full Bootstrap 3 support
+      li A lot of fixed bug, as usual
+
+  #start
+    h1.page-header Getting Started
+
+    p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
+    pre: code
+      | [...]
+      | &lt;link href="bootstrap.css" rel="stylesheet"&gt;
+      | &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
+      | &lt;script src="jquery.js"&gt;&lt;/script&gt;
+      | &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
+      | [...]
+
+    p Add your checkbox.
+    pre: code &lt;input type="checkbox" name="my-checkbox" checked&gt;
+
+    p Initialize Bootstrap Switch.
+    pre: code $("[name='my-checkbox']").bootstrapSwitch();
+
+    p Enjoy.

src/docs/main.jade

@@ -0,0 +1,76 @@
+doctype html
+html(lang='en')
+  head
+    meta(charset='utf-8')
+    meta(http-equiv='X-UA-Compatible', content='IE=edge')
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    meta(name='description', content='Turn checkboxes and radio buttons in toggle switches.')
+    meta(name='author', content='Mattia Larentis, Emanuele Marchi and Peter Stein')
+    title Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches
+    link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
+    link(href='docs/css/bootstrap.min.css', rel='stylesheet')
+    link(href='docs/css/highlight.css', rel='stylesheet')
+    link(href='dist/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
+    link(href='docs/css/main.css', rel='stylesheet')
+    script.
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-43092768-1']);
+      _gaq.push(['_trackPageview']);
+      (function () {
+        var ga = document.createElement('script');
+        ga.type = 'text/javascript';
+        ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(ga, s);
+      })();
+  body
+    a(href='https://github.com/nostalgiaz/bootstrap-switch', id='github')
+      img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub')
+
+    header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
+      .container
+        .navbar-header
+          button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
+            span.sr-only Toggle navigation
+            span.icon-bar
+            span.icon-bar
+            span.icon-bar
+          a.navbar-brand(href='../') Bootstrap Switch <strong>3</strong>
+        nav#collapse.collapse.navbar-collapse(role='navigation')
+          ul.nav.navbar-nav
+            li.dropdown
+              a(href='#', data-toggle='dropdown')
+                | Download
+                span.caret
+              ul.dropdown-menu
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip') 3 (Stable)
+                li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip') 2.0.1 (Legacy)
+            li: a(href='#new') What's new
+            li: a(href='#start') Start
+            li.dropdown
+              a(href='#', data-toggle='dropdown')
+                | Documentation
+                span.caret
+              ul.dropdown-menu
+                li: a(href='/documentation-3.html') Version 3 (Stable)
+                li: a(href='/documentation-2.html') Version 2.0.1 (Legacy)
+            li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
+
+    .container.content
+      block content
+
+    .container.bottom
+      p
+        | Licensed under the
+        | <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
+        | · Created by
+        | <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
+        | · Mantained by
+        | <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
+
+    script(src='docs/js/jquery.min.js')
+    script(src='docs/js/bootstrap.min.js')
+    script(src='docs/js/highlight.js')
+    script(src='dist/js/bootstrap-switch.js')
+    script(src='docs/js/main.js')