Jelajahi Sumber

updated, clean up Radio exemple and remove not needed jQuery Code

updated, clean up Radio exemple and remove not needed jQuery Code
Stein, Peter 12 tahun lalu
induk
melakukan
80e3733e5f
1 mengubah file dengan 61 tambahan dan 110 penghapusan
  1. 61 110
      examples/index.html

+ 61 - 110
examples/index.html

@@ -109,7 +109,10 @@
             <div class="switch" data-on="warning" data-off="danger">
                 <input type="checkbox" checked />
             </div>
-            <div class="switch" data-on="danger" data-off="primary">
+            <div class="switch" data-on="danger" data-off="default">
+                <input type="checkbox" checked />
+            </div>
+            <div class="switch" data-on="default" data-off="primary">
                 <input type="checkbox" checked />
             </div>
         </div>
@@ -130,7 +133,10 @@
     &lt;input type="checkbox" checked />
 &lt;/div>
 
-&lt;div class="switch" data-on="danger" data-off="primary">
+&lt;div class="switch" data-on="danger" data-off="default">
+    &lt;input type="checkbox" checked />
+&lt;/div>
+&lt;div class="switch" data-on="default" data-off="primary">
     &lt;input type="checkbox" checked />
 &lt;/div>
 </pre>
@@ -281,8 +287,9 @@ $('#create-switch').wrap('&lt;div class="switch" />').parent().bootstrapSwitch()
         <h3>Disabled <small>javascript</small></h3>
 
         <div class="bs-docs-example">
+            <label for="disable-switch-input">amazing label</label>
             <div id="disable-switch" class="switch">
-                <input type="checkbox" checked />
+                <input id="disable-switch-input" type="checkbox" checked />
             </div>
             <br>
             <br>
@@ -306,134 +313,75 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     </div>
 </div>
 
-
-<div class="row-fluid">
-    <div class="span12">
-        <h3>Radio <small>- radioboxes 1</small></h3>
-
-        <div class="bs-docs-example">
-               <div class="control-group exemple1">
-                  <br /><br />
-                    <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 />
-                        </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">
-                            <input type="radio" name="radio1" class="check demo-1" value="0" />
-                        </div>
-                    </div>
-                </div>
-
-            <div class="clearfix"></div>
-
-        </div>
-        <pre class="prettyprint linenums">
-    &lt;div class="control-group exemple1">
-      &lt;br />&lt;br />
-        &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 />
-            &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">
-                &lt;input type="radio" name="radio1" class="check demo-1" value="0" />
-            &lt;/div>
-        &lt;/div>
-    &lt;/div>
-&lt;script>
-$(document).ready(function() {
-    $('.radio1').on('switch-change', function () {
-        $('.radio1').bootstrapSwitch('toggleRadioState');
-    });
-});
-&lt;/script></pre>
-    </div>
-</div>
-
-
 <div class="row-fluid">
     <div class="span12">
-        <h3>Radio <small>- radioboxes 2</small></h3>
+        <h3>Radio <small>javascript</small></h3>
 
         <div class="bs-docs-example">
-            <div id="exemple2" class="control-group exemple2">
-              <br /><br />
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option1">Option 1</label>
-                    </div>
+            <div class="control-group">
+                <div class="control-group">
+                    <label class="control-label" for="option1">Option 1</label>
                     <div class="controls">
-                        <div id="option1" class="switch radio2">
-                            <input id="radio1" type="radio" name="radio2" value="option1" checked />
+                        <div id="option1" class="switch radio">
+                            <input type="radio" name="radio" value="option1" checked />
                         </div>
                     </div>
                 </div>
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option2">Option 2</label>
+                <div class="control-group">
+                    <div>
+                    <label class="control-label" for="option2">Option 2</label>
                     </div>
                     <div class="controls">
-                        <div id="option2" class="switch radio2">
-                            <input id="radio2" type="radio" name="radio2" value="option2" />
+                        <div id="option2" class="switch radio">
+                            <input type="radio" name="radio" value="option2" />
                         </div>
                     </div>
                 </div>
-                <div class="control-group" style="margin-bottom: 2%;">
-                    <div style="width: 10%;float: left;">
-                      <label class="control-label" for="option3">Option 3</label>
-                    </div>
+                <div class="control-group">
+                    <label class="control-label" for="option3">Option 3</label>
                     <div class="controls">
-                        <div id="option3" class="switch radio2">
-                            <input id="radio3" type="radio" name="radio2" value="option3" />
+                        <div id="option3" class="switch radio">
+                            <input type="radio" name="radio" value="option3" />
                         </div>
                     </div>
                 </div>
-            <div class="clearfix"></div>
-
+            </div>
         </div>
         <pre class="prettyprint linenums">
-    &lt;div id="exemple2" class="control-group exemple2">
-        &lt;br />&lt;br />
-        &lt;div class="control-group" style="margin-bottom: 2%;">
-          &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option1">Option 1</label>
-          &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 />
-              &lt;/div>
+&lt;div class="control-group">
+    &lt;div class="control-group">
+        &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>
         &lt;/div>
-        &lt;div class="control-group" style="margin-bottom: 2%;">
-            &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option2">Option 2&lt;/label>
-            &lt;/div>
-            &lt;div class="controls radio2">
-              &lt;div id="option2" class="switch option2">
-                &lt;input id="radio2" type="radio" name="radio2" value="option2" />
-              &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="control-group" style="margin-bottom: 2%;">
-            &lt;div style="width: 10%;float: left;">
-              &lt;label class="control-label" for="option3">Option 3&lt;/label>
+        &lt;div class="controls">
+            &lt;div id="option2" class="switch radio">
+                &lt;input type="radio" name="radio" value="option2" />
             &lt;/div>
-            &lt;div class="controls radio2">
-              &lt;div id="option3" class="switch option3">
-                &lt;input id="radio3" type="radio" name="radio2" value="option3" />
-              &lt;/div>
+        &lt;/div>
+    &lt;/div>
+    &lt;div class="control-group">
+        &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>
         &lt;/div>
     &lt;/div>
+&lt;/div>            
 &lt;script>
-$(document).ready(function() {
-    $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioState');
+    $(document).ready(function() {
+        $('.radio').on('switch-change', function () {
+            $('.radio').bootstrapSwitch('toggleRadioState');
+        });
     });
-});
 &lt;/script></pre>
     </div>
 </div>
@@ -441,7 +389,7 @@ $(document).ready(function() {
 
 <div class="row-fluid">
     <div class="span12">
-        <h3>Form <small>- try to use tab and space</small></h3>
+        <h3>Form <small>- try to use tab, space and reset button</small></h3>
 
         <div class="bs-docs-example">
             <form class="form-horizontal span8 offset2">
@@ -470,6 +418,10 @@ $(document).ready(function() {
                         </div>
                     </div>
                 </div>
+
+                <div class="form-actions">
+                    <button type="reset" class="btn btn-inverse">Reset</button>
+                </div>
             </form>
             <div class="clearfix"></div>
         </div>
@@ -497,6 +449,9 @@ $(document).ready(function() {
             &lt;/div>
         &lt;/div>
     &lt;/div>
+    &lt;div class="form-actions">
+        &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
+    &lt;/div>
 &lt;/form></pre>
     </div>
 </div>
@@ -597,12 +552,8 @@ $(document).ready(function() {
         $('#disable-switch').bootstrapSwitch('setActive', true);
     });
 
-    $('.radio1').on('switch-change', function () {
-        $('.radio1').bootstrapSwitch('toggleRadioState');
-    });
-
-    $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioState');
+    $('.radio').on('switch-change', function () {
+        $('.radio').bootstrapSwitch('toggleRadioState');
     });
 
 });