瀏覽代碼

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 年之前
父節點
當前提交
80e3733e5f
共有 1 個文件被更改,包括 61 次插入110 次删除
  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');
     });
 
 });