Sfoglia il codice sorgente

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

claen up code and add new radio exemple (allow uncheck)
Stein, Peter 12 anni fa
parent
commit
ab66d9b86c
1 ha cambiato i file con 81 aggiunte e 42 eliminazioni
  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);
     });
 
 });