Pārlūkot izejas kodu

claen up code and add new radio exemple (allow uncheck)

claen up code and add new radio exemple (allow uncheck)
Stein, Peter 12 gadi atpakaļ
vecāks
revīzija
ab66d9b86c
1 mainītis faili ar 81 papildinājumiem un 42 dzēšanām
  1. 81 42
      examples/index.html

+ 81 - 42
examples/index.html

@@ -313,73 +313,108 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     </div>
 </div>
 
+
 <div class="row-fluid">
     <div class="span12">
         <h3>Radio <small>javascript</small></h3>
 
         <div class="bs-docs-example">
             <div class="control-group">
-                <div class="control-group">
+                 <div class="controls">
                     <label class="control-label" for="option1">Option 1</label>
-                    <div class="controls">
-                        <div id="option1" class="switch radio">
-                            <input type="radio" name="radio" value="option1" checked />
+                        <div id="option1" class="switch radio1">
+                            <input type="radio" name="radio1" value="option1" />
                         </div>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <div>
                     <label class="control-label" for="option2">Option 2</label>
-                    </div>
-                    <div class="controls">
-                        <div id="option2" class="switch radio">
-                            <input type="radio" name="radio" value="option2" />
+                        <div id="option2" class="switch radio1">
+                            <input type="radio" name="radio1" value="option2" />
                         </div>
-                    </div>
-                </div>
-                <div class="control-group">
                     <label class="control-label" for="option3">Option 3</label>
-                    <div class="controls">
-                        <div id="option3" class="switch radio">
-                            <input type="radio" name="radio" value="option3" />
+                        <div id="option3" class="switch radio1">
+                            <input type="radio" name="radio1" value="option3" />
                         </div>
-                    </div>
-                </div>
+                 </div>
             </div>
         </div>
         <pre class="prettyprint linenums">
 &lt;div class="control-group">
-    &lt;div class="control-group">
+    &lt;div class="controls">
         &lt;label class="control-label" for="option1">Option 1&lt;/label>
-        &lt;div class="controls">
-            &lt;div id="option1" class="switch radio">
-                &lt;input type="radio" name="radio" value="option1" checked />
+            &lt;div id="option1" class="switch radio1">
+                &lt;input type="radio" name="radio1" value="option1" />
             &lt;/div>
-        &lt;/div>
-    &lt;/div>
-    &lt;div class="control-group">
-        &lt;div>
         &lt;label class="control-label" for="option2">Option 2&lt;/label>
-        &lt;/div>
-        &lt;div class="controls">
-            &lt;div id="option2" class="switch radio">
-                &lt;input type="radio" name="radio" value="option2" />
+            &lt;div id="option2" class="switch radio1">
+                &lt;input type="radio" name="radio1" value="option2" />
+            &lt;/div>
+        &lt;label class="control-label" for="option3">Option 3&lt;/label>
+            &lt;div id="option3" class="switch radio1">
+                &lt;input type="radio" name="radio1" value="option3" />
             &lt;/div>
-        &lt;/div>
     &lt;/div>
-    &lt;div class="control-group">
+&lt;/div>            
+&lt;script>
+    $(document).ready(function() {
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioState');
+        });
+// or
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
+        });
+// or
+        $('.radio1').on('switch-change', function () {
+            $('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
+        });
+    });
+&lt;/script></pre>
+    </div>
+</div>
+
+
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Radio <small>javascript (allow radios uncheck)</small></h3>
+
+        <div class="bs-docs-example">
+            <div class="control-group">
+                 <div class="controls">
+                    <label class="control-label" for="option1">Option 1</label>
+                        <div id="option1" class="switch radio2">
+                            <input type="radio" name="radio2" value="option1" />
+                        </div>
+                    <label class="control-label" for="option2">Option 2</label>
+                        <div id="option2" class="switch radio2">
+                            <input type="radio" name="radio2" value="option2" checked="checked" />
+                        </div>
+                    <label class="control-label" for="option3">Option 3</label>
+                        <div id="option3" class="switch radio2">
+                            <input type="radio" name="radio2" value="option3" />
+                        </div>
+                 </div>
+            </div>
+        </div>
+        <pre class="prettyprint linenums">
+&lt;div class="control-group">
+    &lt;div class="controls">
+        &lt;label class="control-label" for="option1">Option 1&lt;/label>
+            &lt;div id="option1" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option1" />
+            &lt;/div>
+        &lt;label class="control-label" for="option2">Option 2&lt;/label>
+            &lt;div id="option2" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option2" checked="checked" />
+            &lt;/div>
         &lt;label class="control-label" for="option3">Option 3&lt;/label>
-        &lt;div class="controls">
-            &lt;div id="option3" class="switch radio">
-                &lt;input type="radio" name="radio" value="option3" />
+            &lt;div id="option3" class="switch radio2">
+                &lt;input type="radio" name="radio2" value="option3" />
             &lt;/div>
-        &lt;/div>
     &lt;/div>
 &lt;/div>            
 &lt;script>
     $(document).ready(function() {
-        $('.radio').on('switch-change', function () {
-            $('.radio').bootstrapSwitch('toggleRadioState');
+        $('.radio2').on('switch-change', function () {
+            $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
         });
     });
 &lt;/script></pre>
@@ -552,8 +587,12 @@ $(document).ready(function() {
         $('#disable-switch').bootstrapSwitch('setActive', true);
     });
 
-    $('.radio').on('switch-change', function () {
-        $('.radio').bootstrapSwitch('toggleRadioState');
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
+    });
+
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
     });
 
 });