Browse Source

Added methods for changing values after initialization (labels, classes, animation, size)

Francesco Pontillo 11 năm trước cách đây
mục cha
commit
86854de370
2 tập tin đã thay đổi với 66 bổ sung0 xóa
  1. 6 0
      README.md
  2. 60 0
      static/js/bootstrap-switch.js

+ 6 - 0
README.md

@@ -188,6 +188,12 @@ $('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck'); // don't allow u
 $('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', false); // don't allow uncheck radio switch
 $('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', true); // allow uncheck radio switch
 $('#mySwitch').bootstrapSwitch('setState', true);
+$('#mySwitch').bootstrapSwitch('setOnLabel', onValue); // sets the text of the "on" label
+$('#mySwitch').bootstrapSwitch('setOffLabel', offValue); // sets the text of the "off" label
+$('#mySwitch').bootstrapSwitch('setOnClass', onClass); // sets the left color class
+$('#mySwitch').bootstrapSwitch('setOffClass', offClass); // sets the right color class
+$('#mySwitch').bootstrapSwitch('setAnimated', animated); // sets true or false for animation
+$('#mySwitch').bootstrapSwitch('setSizeClass', size); // sets 'switch-mini', 'switch-small' or 'switch-large'
 $('#mySwitch').bootstrapSwitch('status');  // returns true or false
 $('#mySwitch').bootstrapSwitch('destroy');
 ```

+ 60 - 0
static/js/bootstrap-switch.js

@@ -269,6 +269,66 @@
       setState: function (value, skipOnChange) {
         $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
       },
+      setOnLabel: function(value) {
+        var $switchLeft = $(this).find(".switch-left");
+        $switchLeft.html(value);
+      },
+      setOffLabel: function(value) {
+        var $switchRight = $(this).find(".switch-right");
+        $switchRight.html(value);
+      },
+      setOnClass: function(value) {
+        var $switchLeft = $(this).find(".switch-left");
+        var color = '';
+        if (value !== undefined) {
+          if ($(this).attr('data-on') !== undefined) {
+            color = "switch-" + $(this).attr('data-on')
+          }
+          $switchLeft.removeClass(color);
+          color = "switch-" + value;
+          $switchLeft.addClass(color);
+        }
+      },
+      setOffClass: function(value) {
+        var $switchRight = $(this).find(".switch-right");
+        var color = '';
+        if (value !== undefined) {
+          if ($(this).attr('data-off') !== undefined) {
+            color = "switch-" + $(this).attr('data-off')
+          }
+          $switchRight.removeClass(color);
+          color = "switch-" + value;
+          $switchRight.addClass(color);
+        }
+      },
+      setAnimated: function(value) {
+        var $element = $(this);
+        if (value === undefined) value = false;
+        $element.data('animated', value);
+
+        if ($element.data('animated') !== false) {
+          $element.addClass("switch-animate");
+        } else {
+          $element.removeClass("switch-animate");
+        }
+      },
+      setSizeClass: function(value) {
+        var $element = $(this);
+        var $switchLeft = $element.find(".switch-left");
+        var $switchRight = $element.find(".switch-right");
+        var $label = $element.find("label");
+        $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
+          if (el !== value) {
+            $switchLeft.removeClass(el)
+            $switchRight.removeClass(el);
+            $label.removeClass(el);
+          } else {
+            $switchLeft.addClass(el);
+            $switchRight.addClass(el);
+            $label.addClass(el);
+          }
+        });
+      },
       status: function () {
         return $(this).find(inputSelector).is(':checked');
       },