add some method and update documentation

README.md

@@ -62,4 +62,15 @@ $('#mySwitch').on('switch-change', function (e, data) {
       , value = data.value;
     console.log(e, $el, value);
 });
-```
+```
+
+Methods
+-------
+
+``` javascript
+$('#mySwitch').switch('toggleActivation');
+$('#mySwitch').switch('toggleState');
+$('#mySwitch').switch('setState', true);
+$('#mySwitch').switch('status');  // return true or false
+$('#mySwitch').switch('destroy');
+```

static/js/jquery.switch.js

@@ -1,160 +1,197 @@
 !function ($) {
   "use strict";
 
-  $.fn.switch = function () {
-    this.each(function () {
-        var $element = $(this)
-          , $div
-          , $switchLeft
-          , $switchRight
-          , $label
-          , myClasses = ""
-          , classes = $element.attr('class')
-          , color;
-
-        $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
-          if (classes.indexOf(el) >= 0)
-            myClasses = el;
-        });
-
-        if ($element.data('on') !== undefined)
-          color = "switch-" + $element.data('on');
-
-        $switchLeft = $('<span>')
-          .addClass("switch-left")
-          .addClass(myClasses)
-          .addClass(color)
-          .text("ON");
-
-        if ($element.data('off') !== undefined)
-          color = "switch-" + $element.data('off');
-
-        $switchRight = $('<span>')
-          .addClass("switch-right")
-          .addClass(myClasses)
-          .addClass(color)
-          .text("OFF");
-
-        $label = $('<label>')
-          .html("&nbsp;")
-          .addClass(myClasses)
-          .attr('for', $element.find('input').attr('id'));
-
-        $div = $element.find('input').wrap($('<div>')).parent().data('animated', false);
-
-        if($element.data('animated') !== false)
-          $div.addClass('switch-animate').data('animated', true);
-
-        $div.append($switchLeft);
-        $div.append($label);
-        $div.append($switchRight);
-
-        $element.find('>div').addClass(
-          $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
-        );
+  $.fn.switch = function (method) {
+    var methods = {
+      init:function () {
+        this.each(function () {
+            var $element = $(this)
+              , $div
+              , $switchLeft
+              , $switchRight
+              , $label
+              , myClasses = ""
+              , classes = $element.attr('class')
+              , color;
+
+            $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
+              if (classes.indexOf(el) >= 0)
+                myClasses = el;
+            });
 
-        if ($element.find('input').is(':disabled'))
-          $(this).addClass('deactivate');
+            if ($element.data('on') !== undefined)
+              color = "switch-" + $element.data('on');
 
-        var changeStatus = function ($this) {
-          $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
-        };
+            $switchLeft = $('<span>')
+              .addClass("switch-left")
+              .addClass(myClasses)
+              .addClass(color)
+              .text("ON");
 
-        $switchLeft.on('click', function (e) {
-          changeStatus($(this));
-        });
-        $switchRight.on('click', function (e) {
-          changeStatus($(this));
-        });
+            if ($element.data('off') !== undefined)
+              color = "switch-" + $element.data('off');
 
-        $element.find('input').on('change', function (e) {
-          var $element = $(this).parent();
+            $switchRight = $('<span>')
+              .addClass("switch-right")
+              .addClass(myClasses)
+              .addClass(color)
+              .text("OFF");
 
-          e.preventDefault();
-          e.stopImmediatePropagation();
+            $label = $('<label>')
+              .html("&nbsp;")
+              .addClass(myClasses)
+              .attr('for', $element.find('input').attr('id'));
 
-          $element.css('left', '');
+            $div = $element.find('input').wrap($('<div>')).parent().data('animated', false);
 
-          if ($(this).is(':checked'))
-            $element.removeClass('switch-off').addClass('switch-on');
-          else $element.removeClass('switch-on').addClass('switch-off');
+            if ($element.data('animated') !== false)
+              $div.addClass('switch-animate').data('animated', true);
 
-          if($element.data('animated') !== false)
-            $element.addClass("switch-animate");
+            $div.append($switchLeft);
+            $div.append($label);
+            $div.append($switchRight);
 
-          $element.parent().trigger('switch-change', {'el': $(this), 'value': $(this).is(':checked')})
-        });
+            $element.find('>div').addClass(
+              $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
+            );
 
-        $element.find('label').on('mousedown touchstart', function (e) {
-          var $this = $(this)
-            , moving = false;
+            if ($element.find('input').is(':disabled'))
+              $(this).addClass('deactivate');
 
-          e.preventDefault();
-          e.stopImmediatePropagation();
+            var changeStatus = function ($this) {
+              $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
+            };
 
-          $this.closest('div').removeClass('switch-animate');
+            $switchLeft.on('click', function (e) {
+              changeStatus($(this));
+            });
+            $switchRight.on('click', function (e) {
+              changeStatus($(this));
+            });
 
-          if ($this.closest('.switch').is('.deactivate'))
-            $this.unbind('click');
-          else {
-            $this.on('mousemove touchmove', function (e) {
-              var $element = $(this).closest('.switch')
-                , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
-                , percent = (relativeX / $element.width()) * 100
-                , left = 25
-                , right = 75;
+            $element.find('input').on('change', function (e) {
+              var $element = $(this).parent();
+
+              e.preventDefault();
+              e.stopImmediatePropagation();
 
-              moving = true;
+              $element.css('left', '');
 
-              if (percent < left)
-                percent = left;
-              else if (percent > right)
-                percent = right;
+              if ($(this).is(':checked'))
+                $element.removeClass('switch-off').addClass('switch-on');
+              else $element.removeClass('switch-on').addClass('switch-off');
 
-              $element.find('>div').css('left', (percent - right) + "%")
+              if ($element.data('animated') !== false)
+                $element.addClass("switch-animate");
+
+              $element.parent().trigger('switch-change', {'el':$(this), 'value':$(this).is(':checked')})
             });
 
-            $this.on('click touchend', function (e) {
+            $element.find('label').on('mousedown touchstart', function (e) {
               var $this = $(this)
-                , $target = $(e.target)
-                , $myCheckBox = $target.siblings('input');
+                , moving = false;
 
-              e.stopImmediatePropagation();
               e.preventDefault();
+              e.stopImmediatePropagation();
 
-              $this.unbind('mouseleave');
+              $this.closest('div').removeClass('switch-animate');
 
-              if (moving)
-                $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25));
-              else $myCheckBox.attr("checked", !$myCheckBox.is(":checked"));
+              if ($this.closest('.switch').is('.deactivate'))
+                $this.unbind('click');
+              else {
+                $this.on('mousemove touchmove', function (e) {
+                  var $element = $(this).closest('.switch')
+                    , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
+                    , percent = (relativeX / $element.width()) * 100
+                    , left = 25
+                    , right = 75;
 
-              moving = false;
-              $myCheckBox.trigger('change');
-            });
+                  moving = true;
 
-            $this.on('mouseleave', function (e) {
-              var $this = $(this)
-                , $myCheckBox = $this.siblings('input');
+                  if (percent < left)
+                    percent = left;
+                  else if (percent > right)
+                    percent = right;
 
-              e.preventDefault();
-              e.stopImmediatePropagation();
+                  $element.find('>div').css('left', (percent - right) + "%")
+                });
 
-              $this.unbind('mouseleave');
-              $this.trigger('mouseup');
+                $this.on('click touchend', function (e) {
+                  var $this = $(this)
+                    , $target = $(e.target)
+                    , $myCheckBox = $target.siblings('input');
 
-              $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
-            });
+                  e.stopImmediatePropagation();
+                  e.preventDefault();
 
-            $this.on('mouseup', function (e) {
-              e.stopImmediatePropagation();
-              e.preventDefault();
+                  $this.unbind('mouseleave');
+
+                  if (moving)
+                    $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25));
+                  else $myCheckBox.attr("checked", !$myCheckBox.is(":checked"));
+
+                  moving = false;
+                  $myCheckBox.trigger('change');
+                });
 
-              $(this).unbind('mousemove');
+                $this.on('mouseleave', function (e) {
+                  var $this = $(this)
+                    , $myCheckBox = $this.siblings('input');
+
+                  e.preventDefault();
+                  e.stopImmediatePropagation();
+
+                  $this.unbind('mouseleave');
+                  $this.trigger('mouseup');
+
+                  $myCheckBox.attr('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
+                });
+
+                $this.on('mouseup', function (e) {
+                  e.stopImmediatePropagation();
+                  e.preventDefault();
+
+                  $(this).unbind('mousemove');
+                });
+              }
             });
           }
-        });
+        );
+      },
+      toggleActivation:function () {
+        $(this).toggleClass('deactivate');
+      },
+      toggleState:function (skipOnChange) {
+        var $input = $(this).find('input:checkbox');
+        $input.attr('checked', !$input.is(':checked')).trigger('change', skipOnChange);
+      },
+      setState:function (value, skipOnChange) {
+        $(this).find('input:checkbox').attr('checked', value).trigger('change', skipOnChange);
+      },
+      status:function () {
+        return $(this).find('input:checkbox').is(':checked');
+      },
+      destroy:function () {
+        var $div = $(this).find('div')
+          , $checkbox;
+
+        $div.find(':not(input:checkbox)').remove();
+
+        $checkbox = $div.children();
+        $checkbox.unwrap().unwrap();
+
+        $checkbox.unbind('change');
+
+        return $checkbox;
       }
-    );
+    };
+
+    if (methods[method])
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    else if (typeof method === 'object' || !method)
+      return methods.init.apply(this, arguments);
+    else
+      $.error('Method ' + method + ' does not exist!');
   };
 }(jQuery);