|
@@ -2,15 +2,17 @@
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
- <title>Bootstrap switch - by Mattia Larentis, enhanced by BdMdesigN aka Peter Stein</title>
|
|
|
+ <title>Bootstrap switch - by Mattia Larentis, enhanced by Peter Stein aka BdMdesigN</title>
|
|
|
+ <meta name="description" content="Switches for radio buttons and checkboxes">
|
|
|
<meta name="author" content="Mattia Larentis">
|
|
|
<meta name="subauthor" content="Peter Stein">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
|
|
|
|
|
|
- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
|
|
|
- <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css">
|
|
|
- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
|
|
|
- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
|
|
|
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
|
|
|
+ <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css" />
|
|
|
+ <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" />
|
|
|
+ <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" />
|
|
|
+ <link rel="stylesheet" href="static/stylesheets/styles.css" />
|
|
|
|
|
|
<style>
|
|
|
.span4, h1 {
|
|
@@ -75,12 +77,14 @@
|
|
|
<div class="make-switch switch-mini">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<label>Dimensions can be changed too:</label>
|
|
|
<div id="dimension-switch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-size-large-switch" class="btn">Large</button>
|
|
|
<button id="btn-size-regular-switch" class="btn">Regular</button>
|
|
|
<button id="btn-size-small-switch" class="btn">Small</button>
|
|
@@ -139,14 +143,14 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large'); // Set
|
|
|
<div class="make-switch" data-on="default" data-off="primary">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<label for="change-color-switch">Colors can be changed too</label>
|
|
|
<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-color-on-switch" class="btn">
|
|
|
Change "On" color
|
|
|
</button>
|
|
@@ -201,8 +205,8 @@ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
|
|
|
<div id="animated-switch" class="make-switch" data-animated="false">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-animate-switch" class="btn">
|
|
|
Animate
|
|
|
</button>
|
|
@@ -250,8 +254,8 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false); // Disables anim
|
|
|
<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-label-on-switch" class="btn">
|
|
|
Change "On" label
|
|
|
</button>
|
|
@@ -336,8 +340,8 @@ $('#mySwitch').on('switch-change', function (e, data) {
|
|
|
<div id="toggle-state-switch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <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>
|
|
@@ -360,8 +364,8 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
|
|
|
<div id="destroy-switch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-destroy-switch" class="btn btn-danger">
|
|
|
Destroy me!
|
|
|
</button>
|
|
@@ -378,8 +382,8 @@ $('#destroy-switch').bootstrapSwitch('destroy');
|
|
|
<h3>Create <small>javascript</small></h3>
|
|
|
<div class="bs-docs-example">
|
|
|
<input id="create-switch" type="checkbox" checked />
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<div id="btn-create" class="btn">Create</div>
|
|
|
</div>
|
|
|
<pre class="prettyprint linenums">
|
|
@@ -398,8 +402,8 @@ $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwi
|
|
|
<div id="disable-switch" class="make-switch">
|
|
|
<input id="disable-switch-input" type="checkbox" checked />
|
|
|
</div>
|
|
|
- <br>
|
|
|
- <br>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
<button id="btn-is-active-switch" class="btn">
|
|
|
Is active?
|
|
|
</button>
|
|
@@ -645,7 +649,7 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
|
|
-<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
|
|
|
+<script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
|
|
|
<script src="../static/js/bootstrap-switch.js"></script>
|
|
|
|
|
|
<script>
|