override classes with string or array of classes

build/js/bootstrap-switch.js

@@ -29,6 +29,7 @@
       BootstrapSwitch.prototype.name = "bootstrap-switch";
 
       function BootstrapSwitch(element, options) {
+        var addClasses;
         if (options == null) {
           options = {};
         }
@@ -45,57 +46,69 @@
           offText: this.$element.data("off-text"),
           labelText: this.$element.data("label-text")
         });
+        this.$wrapper = $("<div>");
+        this.$container = $("<div>");
         this.$on = $("<span>", {
-          "class": "" + this.options.classes.base + "-" + this.options.classes.handleOn + " " + this.options.classes.base + "-" + this.options.onColor,
           html: this.options.onText
         });
         this.$off = $("<span>", {
-          "class": "" + this.options.classes.base + "-" + this.options.classes.handleOff + " " + this.options.classes.base + "-" + this.options.offColor,
           html: this.options.offText
         });
         this.$label = $("<label>", {
-          "class": "" + this.options.classes.base + "-" + this.options.classes.label,
           "for": this.$element.attr("id"),
           html: this.options.labelText
         });
-        this.$wrapper = $("<div>");
-        this.$container = $("<div>", {
-          "class": "" + this.options.classes.base + "-" + this.options.classes.container
-        });
+        addClasses = (function(_this) {
+          return function(cls) {
+            var c, classes, _i, _len;
+            if (!$.isArray(cls)) {
+              return "" + _this.options.baseClass + "-" + cls;
+            }
+            classes = [];
+            for (_i = 0, _len = cls.length; _i < _len; _i++) {
+              c = cls[_i];
+              classes.push("" + _this.options.baseClass + "-" + c);
+            }
+            return classes.join(" ");
+          };
+        })(this);
         this.$wrapper.addClass((function(_this) {
           return function() {
             var classes;
-            classes = ["" + _this.options.classes.base];
-            classes.push(_this.options.state ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off);
+            classes = ["" + _this.options.baseClass, "" + _this.options.baseClass + "-" + _this.options.wrapperClass];
+            classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
             if (_this.options.size != null) {
-              classes.push("" + _this.options.classes.base + "-" + _this.options.size);
+              classes.push("" + _this.options.baseClass + "-" + _this.options.size);
             }
             if (_this.options.animate) {
-              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
+              classes.push("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
             }
             if (_this.options.disabled) {
-              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.disabled);
+              classes.push("" + _this.options.baseClass + "-" + _this.options.disabledModifierClass);
             }
             if (_this.options.readonly) {
-              classes.push("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.readonly);
+              classes.push("" + _this.options.baseClass + "-" + _this.options.readonlyModifierClass);
             }
             if (_this.$element.attr("id")) {
-              classes.push("" + _this.options.classes.base + "-id-" + (_this.$element.attr("id")));
+              classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
             }
             return classes.join(" ");
           };
         })(this));
+        this.$container.addClass(addClasses(this.options.containerClass));
+        this.$on.addClass("" + (addClasses(this.options.handleOnClass)) + " " + this.options.baseClass + "-" + this.options.onColor);
+        this.$off.addClass("" + (addClasses(this.options.handleOffClass)) + " " + this.options.baseClass + "-" + this.options.offColor);
+        this.$label.addClass(addClasses(this.options.labelClass));
         this.$element.on("init.bootstrapSwitch", (function(_this) {
           return function() {
-            return _this.options.onInit.apply(_this.$element[0], arguments);
+            return _this.options.onInit.apply(element, arguments);
           };
         })(this));
         this.$element.on("switchChange.bootstrapSwitch", (function(_this) {
           return function() {
-            return _this.options.onSwitchChange.apply(_this.$element[0], arguments);
+            return _this.options.onSwitchChange.apply(element, arguments);
           };
         })(this));
-        console.log(this.$container);
         this.$container = this.$element.wrap(this.$container).parent();
         this.$wrapper = this.$container.wrap(this.$wrapper).parent();
         this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init.bootstrapSwitch");
@@ -131,9 +144,9 @@
           return this.options.size;
         }
         if (this.options.size != null) {
-          this.$wrapper.removeClass("" + this.options.classes.base + "-" + this.options.size);
+          this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.size);
         }
-        this.$wrapper.addClass("" + this.options.classes.base + "-" + value);
+        this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
         this.options.size = value;
         return this.$element;
       };
@@ -143,7 +156,7 @@
           return this.options.animate;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.animate);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.animateModifierClass);
         this.options.animate = value;
         return this.$element;
       };
@@ -153,7 +166,7 @@
           return this.options.disabled;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.disabled);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
         this.$element.prop("disabled", value);
         this.options.disabled = value;
         return this.$element;
@@ -161,7 +174,7 @@
 
       BootstrapSwitch.prototype.toggleDisabled = function() {
         this.$element.prop("disabled", !this.options.disabled);
-        this.$wrapper.toggleClass("" + this.options.classes.base + "-" + this.options.classes.modifiers.disabled);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
         this.options.disabled = !this.options.disabled;
         return this.$element;
       };
@@ -171,7 +184,7 @@
           return this.options.readonly;
         }
         value = !!value;
-        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.classes.base + "-" + this.options.classes.modifiers.readonly);
+        this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
         this.$element.prop("readonly", value);
         this.options.readonly = value;
         return this.$element;
@@ -179,7 +192,7 @@
 
       BootstrapSwitch.prototype.toggleReadonly = function() {
         this.$element.prop("readonly", !this.options.readonly);
-        this.$wrapper.toggleClass("" + this.options.classes.base + "-" + this.options.classes.modifiers.readonly);
+        this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
         this.options.readonly = !this.options.readonly;
         return this.$element;
       };
@@ -191,9 +204,9 @@
           return color;
         }
         if (color != null) {
-          this.$on.removeClass("" + this.options.classes.base + "-" + color);
+          this.$on.removeClass("" + this.options.baseClass + "-" + color);
         }
-        this.$on.addClass("" + this.options.classes.base + "-" + value);
+        this.$on.addClass("" + this.options.baseClass + "-" + value);
         this.options.onColor = value;
         return this.$element;
       };
@@ -205,9 +218,9 @@
           return color;
         }
         if (color != null) {
-          this.$off.removeClass("" + this.options.classes.base + "-" + color);
+          this.$off.removeClass("" + this.options.baseClass + "-" + color);
         }
-        this.$off.addClass("" + this.options.classes.base + "-" + value);
+        this.$off.addClass("" + this.options.baseClass + "-" + value);
         this.options.offColor = value;
         return this.$element;
       };
@@ -263,7 +276,7 @@
                 return;
               }
               _this.options.state = checked;
-              _this.$wrapper.removeClass(checked ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on).addClass(checked ? "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.on : "" + _this.options.classes.base + "-" + _this.options.classes.modifiers.off);
+              _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-" + _this.options.offModifierClass : "" + _this.options.baseClass + "-" + _this.options.onModifierClass).addClass(checked ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
               if (!skip) {
                 if (_this.$element.is(":radio")) {
                   $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
@@ -277,7 +290,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.addClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.focused);
+              return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
             };
           })(this),
           "blur.bootstrapSwitch": (function(_this) {
@@ -285,7 +298,7 @@
               e.preventDefault();
               e.stopPropagation();
               e.stopImmediatePropagation();
-              return _this.$wrapper.removeClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.focused);
+              return _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
             };
           })(this),
           "keydown.bootstrapSwitch": (function(_this) {
@@ -357,7 +370,7 @@
               }
               _this.drag = true;
               if (_this.options.animate) {
-                _this.$wrapper.removeClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
+                _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
               }
               return _this.$element.trigger("focus.bootstrapSwitch");
             };
@@ -371,7 +384,7 @@
               _this.$element.prop("checked", parseInt(_this.$container.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
               _this.$container.css("margin-left", "");
               if (_this.options.animate) {
-                return _this.$wrapper.addClass("" + _this.options.classes.base + "-" + _this.options.classes.modifiers.animate);
+                return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
               }
             };
           })(this),
@@ -440,22 +453,18 @@
       onText: "ON",
       offText: "OFF",
       labelText: "&nbsp;",
-      classes: {
-        base: "bootstrap-switch",
-        container: "container",
-        wrapper: "wrapper",
-        handleOn: "handle-on",
-        handleOff: "handle-off",
-        label: "label",
-        modifiers: {
-          on: "on",
-          off: "off",
-          focused: "focused",
-          animate: "animate",
-          disabled: "disabled",
-          readonly: "readonly"
-        }
-      },
+      baseClass: "bootstrap-switch",
+      wrapperClass: "wrapper",
+      containerClass: "container",
+      handleOnClass: "handle-on",
+      handleOffClass: "handle-off",
+      labelClass: "label",
+      onModifierClass: "on",
+      offModifierClass: "off",
+      focusedModifierClass: "focused",
+      animateModifierClass: "animate",
+      disabledModifierClass: "disabled",
+      readonlyModifierClass: "readonly",
       onInit: function() {},
       onSwitchChange: function() {}
     };

docs/index.jade

@@ -46,23 +46,6 @@ html(lang='en')
                 li: a(href='#options') Options
                 li: a(href='#methods') Methods
                 li: a(href='#events') Events
-
-                //-
-                  li: a(href='#size') Size
-                  li: a(href='#colors') Colors
-                  li: a(href='#animation') Animation
-                  li: a(href='#disabled') Disabled / Readonly
-                  li: a(href='#text') Text
-                  li: a(href='#label-text') Label Text
-                  li: a(href='#icon-label-text') Icon Label Text
-                  li: a(href='#event-handlers') Event Handlers
-                  li: a(href='#label-event-handler') Label Event Handlers
-                  li: a(href='#state') State
-                  li: a(href='#destroy') Destroy
-                  li: a(href='#disable') Disable / Readonly
-                  li: a(href='#radio') Radio
-                  li: a(href='#form') Form
-                  li: a(href='#modal') Modal
             li: a(href='#examples') Examples
             li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
 
@@ -134,43 +117,115 @@ html(lang='en')
               td String
               td Color of the left side of the switch
               td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-              td 'primary'
+              td: 'primary'
             tr
               td offColor
               td String
               td Color of the right side of the switch
               td 'primary', 'info', 'success', 'warning', 'danger', 'default'
-              td 'default'
+              td: 'default'
             tr
               td onText
               td String
               td Text of the left side of the switch
               td String
-              td 'ON'
+              td: 'ON'
             tr
               td offText
               td String
               td Text of the right side of the switch
               td String
-              td 'OFF'
+              td: 'OFF'
             tr
               td labelText
               td String
               td Text of the center handle of the switch
               td String
-              td ' '
+              td: ' '
+            tr
+              td baseClass
+              td String
+              td Prefix of every other used class
+              td String
+              td 'bootstrap-switch'
+            tr
+              td wrapperClass
+              td String | Array
+              td Container element class(es)
+              td String | Array
+              td 'wrapper'
+            tr
+              td containerClass
+              td String | Array
+              td Wrapper element class(es)
+              td String | Array
+              td 'container'
+            tr
+              td handleOnClass
+              td String | Array
+              td Handle On element class(es)
+              td String | Array
+              td 'handle-on'
+            tr
+              td handleOffClass
+              td String | Array
+              td Handle Off element class(es)
+              td String | Array
+              td 'handle-off'
+            tr
+              td labelClass
+              td String | Array
+              td Label element class(es)
+              td String | Array
+              td 'label'
+            tr
+              td onModifierClass
+              td String
+              td On Modifier class, used when the switch state is true
+              td String
+              td 'on'
+            tr
+              td offModifierClass
+              td String
+              td Off Modifier class, used when the switch state is false
+              td String
+              td 'off'
+            tr
+              td focusedModifierClass
+              td String
+              td Focused Modifier class, used when the switch is focused
+              td String
+              td 'focused'
+            tr
+              td animateModifierClass
+              td String
+              td Animate Modifier class, used to apply CSS animation to the switch
+              td String
+              td 'animate'
+            tr
+              td disabledModifierClass
+              td String
+              td Disabled Modifier class, used the switch is disabled
+              td String
+              td 'disabled'
+            tr
+              td readonlyModifierClass
+              td String
+              td Readonly Modifier class, used the switch is readonly
+              td String
+              td 'readonly'
             tr
               td onInit
               td Function
               td Callback function to execute on initialization
               td Function
-              td function(event) {}
+              td: pre: code.javascript function(event, state) {}
             tr
               td onSwitchChange
               td Function
               td Callback function to execute on switch state change
               td Function
-              td function(event, state) {}
+              td: pre: code.javascript function(event, state) {}
 
       #methods
         h1.page-header Methods
@@ -223,7 +278,7 @@ html(lang='en')
               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>
+                | 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.
@@ -236,16 +291,16 @@ html(lang='en')
           h2 State
           .row
             .col-sm-6
-              input(type='checkbox', id='toggle-state-switch' checked)
+              input(type='checkbox', id='state-switch' checked)
             .col-sm-6
               .btn-group.pull-right
-                button(type='button', id='toggle-state-switch-button-state', class='btn btn-default') Get State
+                button(type='button', id='state-switch-state', class='btn btn-default') Get State
                 &nbsp;
-                button(type='button', id='toggle-state-switch-button-on', class='btn btn-default') Set On
+                button(type='button', id='state-switch-on', class='btn btn-default') Set On
                 &nbsp;
-                button(type='button', id='toggle-state-switch-button-off', class='btn btn-default') Set Off
+                button(type='button', id='state-switch-off', class='btn btn-default') Set Off
                 &nbsp;
-                button(type='button', id='toggle-state-switch-button', class='btn btn-default') Toggle State
+                button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
 
         <p>Working on this...</p>
 

docs/index.js

@@ -1,4 +1,5 @@
 $(function() {
+  var stateSwitch = $('#state-switch')
   // initialize highlight.js
   hljs.initHighlightingOnLoad();
 
@@ -16,6 +17,20 @@ $(function() {
   // 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 () {
@@ -31,19 +46,7 @@ $(function() {
     $('#dimension-switch').bootstrapSwitch('size', 'large');
   });
 
-  // state
-  $('#toggle-state-switch-button').on('click', function () {
-    $('#toggle-state-switch').bootstrapSwitch('toggleState');
-  });
-  $('#toggle-state-switch-button-on').on('click', function () {
-    $('#toggle-state-switch').bootstrapSwitch('state', true);
-  });
-  $('#toggle-state-switch-button-off').on('click', function () {
-    $('#toggle-state-switch').bootstrapSwitch('state', false);
-  });
-  $('#toggle-state-switch-button-state').on('click', function () {
-    alert($('#toggle-state-switch').bootstrapSwitch('state'));
-  });
+
 
   // destroy
   $('#btn-destroy-switch').on('click', function () {

src/coffee/bootstrap-switch.coffee

@@ -17,37 +17,43 @@ do ($ = window.jQuery, window) ->
         onText: @$element.data "on-text"
         offText: @$element.data "off-text"
         labelText: @$element.data "label-text"
-      @$on = $ "<span>",
-        class: "#{@options.classes.base}-#{@options.classes.handleOn} #{@options.classes.base}-#{@options.onColor}"
-        html: @options.onText
-      @$off = $ "<span>",
-        class: "#{@options.classes.base}-#{@options.classes.handleOff} #{@options.classes.base}-#{@options.offColor}"
-        html: @options.offText
+      @$wrapper = $ "<div>"
+      @$container = $ "<div>"
+      @$on = $ "<span>", html: @options.onText
+      @$off = $ "<span>", html: @options.offText
       @$label = $ "<label>",
-        class: "#{@options.classes.base}-#{@options.classes.label}"
         for: @$element.attr "id"
         html: @options.labelText
-      @$wrapper = $ "<div>"
-      @$container = $ "<div>",
-        class: "#{@options.classes.base}-#{@options.classes.container}"
 
-      # add wrapper classes
+      addClasses = (cls) =>
+        if not $.isArray cls
+          return "#{@options.baseClass}-#{cls}"
+
+        classes = []
+        for c in cls
+          classes.push "#{@options.baseClass}-#{c}"
+        classes.join " "
+
+      # add classes to elements
       @$wrapper.addClass =>
-        classes = ["#{@options.classes.base}"]
-
-        classes.push if @options.state then "#{@options.classes.base}-#{@options.classes.modifiers.on}" else "#{@options.classes.base}-#{@options.classes.modifiers.off}"
-        classes.push "#{@options.classes.base}-#{@options.size}" if @options.size?
-        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
-        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.disabled}" if @options.disabled
-        classes.push "#{@options.classes.base}-#{@options.classes.modifiers.readonly}" if @options.readonly
-        classes.push "#{@options.classes.base}-id-#{@$element.attr("id")}" if @$element.attr "id"
+        classes = ["#{@options.baseClass}", "#{@options.baseClass}-#{@options.wrapperClass}"]
+
+        classes.push if @options.state then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
+        classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
+        classes.push "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
+        classes.push "#{@options.baseClass}-#{@options.disabledModifierClass}" if @options.disabled
+        classes.push "#{@options.baseClass}-#{@options.readonlyModifierClass}" if @options.readonly
+        classes.push "#{@options.baseClass}-id-#{@$element.attr("id")}" if @$element.attr "id"
         classes.join " "
 
-      # set up events
-      @$element.on "init.bootstrapSwitch", => @options.onInit.apply @$element[0], arguments
-      @$element.on "switchChange.bootstrapSwitch", => @options.onSwitchChange.apply @$element[0], arguments
+      @$container.addClass addClasses @options.containerClass
+      @$on.addClass "#{addClasses @options.handleOnClass} #{@options.baseClass}-#{@options.onColor}"
+      @$off.addClass "#{addClasses @options.handleOffClass} #{@options.baseClass}-#{@options.offColor}"
+      @$label.addClass addClasses @options.labelClass
 
-      console.log @$container
+      # set up events
+      @$element.on "init.bootstrapSwitch", => @options.onInit.apply element, arguments
+      @$element.on "switchChange.bootstrapSwitch", => @options.onSwitchChange.apply element, arguments
 
       # reassign elements after dom modification
       @$container = @$element.wrap(@$container).parent()
@@ -86,8 +92,8 @@ do ($ = window.jQuery, window) ->
     size: (value) ->
       return @options.size if typeof value is "undefined"
 
-      @$wrapper.removeClass "#{@options.classes.base}-#{@options.size}" if @options.size?
-      @$wrapper.addClass "#{@options.classes.base}-#{value}"
+      @$wrapper.removeClass "#{@options.baseClass}-#{@options.size}" if @options.size?
+      @$wrapper.addClass "#{@options.baseClass}-#{value}"
       @options.size = value
       @$element
 
@@ -96,7 +102,7 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.animate}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.animateModifierClass}")
       @options.animate = value
       @$element
 
@@ -105,14 +111,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.disabled}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.disabledModifierClass}")
       @$element.prop "disabled", value
       @options.disabled = value
       @$element
 
     toggleDisabled: ->
       @$element.prop "disabled", not @options.disabled
-      @$wrapper.toggleClass "#{@options.classes.base}-#{@options.classes.modifiers.disabled}"
+      @$wrapper.toggleClass "#{@options.baseClass}-#{@options.disabledModifierClass}"
       @options.disabled = not @options.disabled
       @$element
 
@@ -121,14 +127,14 @@ do ($ = window.jQuery, window) ->
 
       value = not not value
 
-      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.classes.base}-#{@options.classes.modifiers.readonly}")
+      @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-#{@options.readonlyModifierClass}")
       @$element.prop "readonly", value
       @options.readonly = value
       @$element
 
     toggleReadonly: ->
       @$element.prop "readonly", not @options.readonly
-      @$wrapper.toggleClass "#{@options.classes.base}-#{@options.classes.modifiers.readonly}"
+      @$wrapper.toggleClass "#{@options.baseClass}-#{@options.readonlyModifierClass}"
       @options.readonly = not @options.readonly
       @$element
 
@@ -137,8 +143,8 @@ do ($ = window.jQuery, window) ->
 
       return color if typeof value is "undefined"
 
-      @$on.removeClass "#{@options.classes.base}-#{color}" if color?
-      @$on.addClass "#{@options.classes.base}-#{value}"
+      @$on.removeClass "#{@options.baseClass}-#{color}" if color?
+      @$on.addClass "#{@options.baseClass}-#{value}"
       @options.onColor = value
       @$element
 
@@ -147,8 +153,8 @@ do ($ = window.jQuery, window) ->
 
       return color if typeof value is "undefined"
 
-      @$off.removeClass "#{@options.classes.base}-#{color}" if color?
-      @$off.addClass "#{@options.classes.base}-#{value}"
+      @$off.removeClass "#{@options.baseClass}-#{color}" if color?
+      @$off.addClass "#{@options.baseClass}-#{value}"
       @options.offColor = value
       @$element
 
@@ -194,8 +200,8 @@ do ($ = window.jQuery, window) ->
 
           @options.state = checked
           @$wrapper
-          .removeClass(if checked then "#{@options.classes.base}-#{@options.classes.modifiers.off}" else "#{@options.classes.base}-#{@options.classes.modifiers.on}")
-          .addClass if checked then "#{@options.classes.base}-#{@options.classes.modifiers.on}" else "#{@options.classes.base}-#{@options.classes.modifiers.off}"
+          .removeClass(if checked then "#{@options.baseClass}-#{@options.offModifierClass}" else "#{@options.baseClass}-#{@options.onModifierClass}")
+          .addClass if checked then "#{@options.baseClass}-#{@options.onModifierClass}" else "#{@options.baseClass}-#{@options.offModifierClass}"
 
           unless skip
             $("[name='#{@$element.attr('name')}']").not(@$element).prop("checked", false).trigger "change.bootstrapSwitch", true if @$element.is ":radio"
@@ -206,14 +212,14 @@ do ($ = window.jQuery, window) ->
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.addClass "#{@options.classes.base}-#{@options.classes.modifiers.focused}"
+          @$wrapper.addClass "#{@options.baseClass}-#{@options.focusedModifierClass}"
 
         "blur.bootstrapSwitch": (e) =>
           e.preventDefault()
           e.stopPropagation()
           e.stopImmediatePropagation()
 
-          @$wrapper.removeClass "#{@options.classes.base}-#{@options.classes.modifiers.focused}"
+          @$wrapper.removeClass "#{@options.baseClass}-#{@options.focusedModifierClass}"
 
         "keydown.bootstrapSwitch": (e) =>
           return if not e.which or @options.disabled or @options.readonly
@@ -268,7 +274,7 @@ do ($ = window.jQuery, window) ->
           return if @drag or @options.disabled or @options.readonly
 
           @drag = true
-          @$wrapper.removeClass "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
+          @$wrapper.removeClass "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
           @$element.trigger "focus.bootstrapSwitch"
 
         "mouseup.bootstrapSwitch": (e) =>
@@ -277,7 +283,7 @@ do ($ = window.jQuery, window) ->
           @drag = false
           @$element.prop("checked", (parseInt(@$container.css("margin-left"), 10) > -25)).trigger "change.bootstrapSwitch"
           @$container.css "margin-left", ""
-          @$wrapper.addClass "#{@options.classes.base}-#{@options.classes.modifiers.animate}" if @options.animate
+          @$wrapper.addClass "#{@options.baseClass}-#{@options.animateModifierClass}" if @options.animate
 
         "mouseleave.bootstrapSwitch": (e) =>
           @$label.trigger "mouseup.bootstrapSwitch"
@@ -326,20 +332,18 @@ do ($ = window.jQuery, window) ->
     onText: "ON"
     offText: "OFF"
     labelText: "&nbsp;"
-    classes:
-      base: "bootstrap-switch"
-      container: "container"
-      wrapper: "wrapper"
-      handleOn: "handle-on"
-      handleOff: "handle-off"
-      label: "label"
-      modifiers:
-        on: "on"
-        off: "off"
-        focused: "focused"
-        animate: "animate"
-        disabled: "disabled"
-        readonly: "readonly"
+    baseClass: "bootstrap-switch"
+    wrapperClass: "wrapper"
+    containerClass: "container"
+    handleOnClass: "handle-on"
+    handleOffClass: "handle-off"
+    labelClass: "label"
+    onModifierClass: "on"
+    offModifierClass: "off"
+    focusedModifierClass: "focused"
+    animateModifierClass: "animate"
+    disabledModifierClass: "disabled"
+    readonlyModifierClass: "readonly"
     onInit: ->
     onSwitchChange: ->