Kaynağa Gözat

Update index.html

Updated the radio Exemples and added the v1.4
Stein, Peter 12 yıl önce
ebeveyn
işleme
6212f706fa
1 değiştirilmiş dosya ile 20 ekleme ve 40 silme
  1. 20 40
      examples/index.html

+ 20 - 40
examples/index.html

@@ -229,11 +229,13 @@ $('#mySwitch').on('switch-change', function (e, data) {
             </div>
             <br>
             <br>
+            <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
             <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
             <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
             <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
         </div>
         <pre class="prettyprint linenums">
+$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
 $('#toggle-state-switch').bootstrapSwitch('toggleState');
 $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
     </div>
@@ -315,7 +317,7 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
                     <div id="radio1" class="controls">
                         <label class="control-label" for="yes">Yes</label>
                         <div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                            <input type="radio" name="radio1" class="check demo-1" value="1" checked="checked" />
+                            <input type="radio" name="radio1" class="check demo-1" value="1" checked />
                         </div>
                         <label class="control-label" for="no">No</label>
                         <div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
@@ -333,7 +335,7 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
         &lt;div id="radio1" class="controls">
             &lt;label class="control-label" for="yes">Yes&lt;/label>
             &lt;div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                &lt;input type="radio" name="radio1" class="check demo-1" value="1" checked="checked" />
+                &lt;input type="radio" name="radio1" class="check demo-1" value="1" checked />
             &lt;/div>
             &lt;label class="control-label" for="no">No&lt;/label>
             &lt;div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
@@ -343,16 +345,10 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     &lt;/div>
 &lt;script>
 $(document).ready(function() {
-    $('.radio1').on('click', function () {
-        $(this).addClass('is-checked');
-            if($('div').not('.is-checked')) {
-                $('.radio1').bootstrapSwitch('toggleState');
-            }
-            if($(this).bootstrapSwitch('isActive') == true) {
-                $('.is-checked').bootstrapSwitch('toggleState');
-                $(this).removeClass('is-checked');
-            }
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
     });
+});
 &lt;/script></pre>
     </div>
 </div>
@@ -371,7 +367,7 @@ $(document).ready(function() {
                     </div>
                     <div class="controls">
                         <div id="option1" class="switch radio2">
-                            <input id="radio1" type="radio" name="radio2" value="option1" checked="checked" />
+                            <input id="radio1" type="radio" name="radio2" value="option1" checked />
                         </div>
                     </div>
                 </div>
@@ -407,7 +403,7 @@ $(document).ready(function() {
           &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option1" class="switch option1">
-                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked="checked" />
+                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked />
               &lt;/div>
             &lt;/div>
         &lt;/div>
@@ -434,16 +430,10 @@ $(document).ready(function() {
     &lt;/div>
 &lt;script>
 $(document).ready(function() {
-    $('.radio2').on('click', function () {
-        $(this).addClass('is-checked');
-            if($('div').not('.is-checked')) {
-                $('.radio2').bootstrapSwitch('toggleState');
-            }
-            if($(this).bootstrapSwitch('isActive') == true) {
-                $('.is-checked').bootstrapSwitch('toggleState');
-                $(this).removeClass('is-checked');
-            }
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioGroupState');
     });
+});
 &lt;/script></pre>
     </div>
 </div>
@@ -573,6 +563,10 @@ $(document).ready(function() {
         $('#toggle-state-switch').bootstrapSwitch('setState', true);
     });
 
+    $('#toggle-state-switch-button-status').on('click', function () {
+        alert($('#toggle-state-switch').bootstrapSwitch('status'));
+    });
+
     $('#toggle-state-switch-button-off').on('click', function () {
         $('#toggle-state-switch').bootstrapSwitch('setState', false);
     });
@@ -603,26 +597,12 @@ $(document).ready(function() {
         $('#disable-switch').bootstrapSwitch('setActive', true);
     });
 
-    $('.radio1').on('click', function () {
-        $(this).addClass('is-checked');
-            if($('div').not('.is-checked')) {
-                $('.radio1').bootstrapSwitch('toggleState');
-            }
-            if($(this).bootstrapSwitch('isActive') == true) {
-                $('.is-checked').bootstrapSwitch('toggleState');
-                $(this).removeClass('is-checked');
-            }
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
     });
 
-    $('.radio2').on('click', function () {
-        $(this).addClass('is-checked');
-            if($('div').not('.is-checked')) {
-                $('.radio2').bootstrapSwitch('toggleState');
-            }
-            if($(this).bootstrapSwitch('isActive') == true) {
-                $('.is-checked').bootstrapSwitch('toggleState');
-                $(this).removeClass('is-checked');
-            }
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioState');
     });
 
 });