|
|
@@ -9,16 +9,12 @@
|
|
|
<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="../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 type="text/css">
|
|
|
- body {
|
|
|
- padding-top: 60px;
|
|
|
- padding-bottom: 40px;
|
|
|
- }
|
|
|
+ <style>
|
|
|
.span4, h1 {
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -30,81 +26,41 @@
|
|
|
h3 {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- </style>
|
|
|
- <!-- TODO: make sure bootstrap-responsive.min.css points to BootTheme
|
|
|
- generated file -->
|
|
|
- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"
|
|
|
- rel="stylesheet">
|
|
|
- <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
|
|
- <!--[if lt IE 9]>
|
|
|
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
|
- <![endif]-->
|
|
|
- <!-- Fav and touch icons -->
|
|
|
+ </style>
|
|
|
</head>
|
|
|
-
|
|
|
- <body>
|
|
|
- <div class="navbar navbar-fixed-top">
|
|
|
- <div class="navbar-inner">
|
|
|
- <a href="https://github.com/nostalgiaz/bootstrap-switch"><img
|
|
|
- style="position: absolute; top: 0; right: 0; border: 0;"
|
|
|
- src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
|
|
|
- alt="Fork me on GitHub"></a>
|
|
|
-
|
|
|
- <div class="row-fluid" style="margin-top:10px;">
|
|
|
- <div class="span12">
|
|
|
- <h1>Bootstrap switch<small> - by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a></small></h1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<body style="padding-top: 50px;">
|
|
|
|
|
|
- <div class="row-fluid">
|
|
|
- <div class="span8 offset2" style="text-align: center;">
|
|
|
- <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
|
|
|
- allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
- <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
|
|
|
- allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
- <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
|
|
|
- allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<a href="https://github.com/nostalgiaz/bootstrap-switch"><img
|
|
|
+ style="position: absolute; top: 0; right: 0; border: 0;"
|
|
|
+ src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
|
|
|
+ alt="Fork me on GitHub"></a>
|
|
|
|
|
|
- <div class="container-fluid">
|
|
|
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
|
|
|
- <span class="icon-bar"></span>
|
|
|
- <span class="icon-bar"></span>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="nav-collapse collapse">
|
|
|
- <p class="navbar-text pull-right" style="padding-right:15px;">Downloads:
|
|
|
- <a href="https://github.com/nostalgiaz/bootstrap-switch/zipball/master" class="navbar-link">ZIP</a>
|
|
|
- <a href="https://github.com/nostalgiaz/bootstrap-switch/tarball/master" class="navbar-link">TAR</a>
|
|
|
- </p>
|
|
|
- <ul class="nav nav-links">
|
|
|
- <li>
|
|
|
- <a href="./index.html">Home</a>
|
|
|
- </li>
|
|
|
- <li class="active">
|
|
|
- <a href="./examples.html">Demos</a>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!--/.nav-collapse -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<div class="container">
|
|
|
|
|
|
- <div id="nav-content-container">
|
|
|
- <div class="container">
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span12">
|
|
|
+ <h1>Bootstrap switch
|
|
|
+ <small>- by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
|
|
|
+ </small>
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="wrapper">
|
|
|
- <nav>
|
|
|
- <ul></ul>
|
|
|
- </nav>
|
|
|
- <section>
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span8 offset2" style="text-align: center;">
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <h2><a name="size" class="anchor" href="#size"><span class="octicon octicon-link"></span></a>Size</h2>
|
|
|
<!-- SIZE -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Size</h3>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="make-switch switch-large">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -121,14 +77,12 @@
|
|
|
<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>
|
|
|
@@ -164,10 +118,10 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large'); // Set
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>
|
|
|
<!-- COLORS -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Colors <small>javascript</small></h3>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="make-switch" data-on="primary" data-off="info">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -240,10 +194,11 @@ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation <small>javascript</small></h2>
|
|
|
<!-- ANIMATION -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Animation <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div id="animated-switch" class="make-switch" data-animated="false">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -270,10 +225,11 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false); // Disables anim
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="disabled" class="anchor" href="#disabled"><span class="octicon octicon-link"></span></a>Disabled</h2>
|
|
|
<!-- DISABLED -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Disabled</h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="make-switch">
|
|
|
<input type="checkbox" checked disabled />
|
|
|
@@ -287,10 +243,11 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false); // Disables anim
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>
|
|
|
<!-- TEXT -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Text</h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -316,10 +273,11 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML text</h2>
|
|
|
<!-- HTML TEXT -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>HTML text</h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -333,10 +291,11 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="html-text-mini-switch" class="anchor" href="#html-text-mini-switch"><span class="octicon octicon-link"></span></a>HTML text (mini-switch)</h2>
|
|
|
<!-- HTML TEXT MINI SWITCH -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>HTML text (mini-switch)</h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -350,10 +309,11 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="event-handler" class="anchor" href="#event-handler"><span class="octicon octicon-link"></span></a>Event handler <small>javascript</small></h2>
|
|
|
<!-- EVENT HANDLER -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Event handler <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div id="mySwitch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -369,10 +329,11 @@ $('#mySwitch').on('switch-change', function (e, data) {
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="toggle-state " class="anchor" href="#toggle-state"><span class="octicon octicon-link"></span></a>Toggle State <small>javascript</small></h2>
|
|
|
<!-- TOGGLE -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Toggle State <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div id="toggle-state-switch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -392,10 +353,11 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="destroy" class="anchor" href="#destroy"><span class="octicon octicon-link"></span></a>Destroy <small>javascript</small></h2>
|
|
|
<!-- DESTROY -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Destroy <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div id="destroy-switch" class="make-switch">
|
|
|
<input type="checkbox" checked />
|
|
|
@@ -412,10 +374,10 @@ $('#destroy-switch').bootstrapSwitch('destroy');
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="create" class="anchor" href="#create"><span class="octicon octicon-link"></span></a>Create <small>javascript</small></h2>
|
|
|
<!-- CREATE -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Create <small>javascript</small></h3>
|
|
|
<div class="bs-docs-example">
|
|
|
<input id="create-switch" type="checkbox" checked />
|
|
|
<br />
|
|
|
@@ -428,10 +390,11 @@ $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwi
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript"><span class="octicon octicon-link"></span></a>Disabled <small>javascript</small></h2>
|
|
|
<!-- DISABLED -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Disabled <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<label for="disable-switch-input">amazing label</label>
|
|
|
<div id="disable-switch" class="make-switch">
|
|
|
@@ -460,10 +423,11 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="radio-javascript" class="anchor" href="#radio-javascript"><span class="octicon octicon-link"></span></a>Radio <small>javascript</small></h2>
|
|
|
<!-- RADIO -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Radio <small>javascript</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="control-group">
|
|
|
<div class="controls">
|
|
|
@@ -518,10 +482,11 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><span class="octicon octicon-link"></span></a>Radio <small>javascript (allow radios uncheck)</small></h2>
|
|
|
<!-- RADIO ALLOW UNCHECK -->
|
|
|
<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">
|
|
|
@@ -568,10 +533,11 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="form" class="anchor" href="#form"><span class="octicon octicon-link"></span></a>Form <small>- try to use tab, space and reset button</small></h2>
|
|
|
<!-- FORM -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Form <small>- try to use tab, space and reset button</small></h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<form class="form-horizontal span8 offset2">
|
|
|
<div class="control-group">
|
|
|
@@ -639,10 +605,11 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <h2><a name="modal" class="anchor" href="#modal"><span class="octicon octicon-link"></span></a>Modal</h2>
|
|
|
<!-- MODAL -->
|
|
|
<div class="row-fluid">
|
|
|
<div class="span12">
|
|
|
+ <h3>Modal</h3>
|
|
|
+
|
|
|
<div class="bs-docs-example">
|
|
|
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
|
|
|
</div>
|
|
|
@@ -656,6 +623,11 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div></pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+<p class="pull-right">
|
|
|
+ <a href="https://twitter.com/SpiritualGuru">follow me</a> -
|
|
|
+ <a href="http://www.larentis.eu">my site</a>
|
|
|
+</p>
|
|
|
</div>
|
|
|
|
|
|
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
@@ -674,6 +646,9 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
|
|
|
</div>
|
|
|
|
|
|
<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://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
|
|
|
+<script src="../static/js/bootstrap-switch.js"></script>
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function() {
|
|
|
@@ -771,37 +746,6 @@ $(document).ready(function() {
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <footer>
|
|
|
- <div class="navbar navbar-fixed-bottom" style="height:30px;">
|
|
|
-
|
|
|
- <div class="navbar-inner">
|
|
|
- <div class="container-fluid">
|
|
|
- <p style="float:left; padding-top: 5px;">
|
|
|
- © by
|
|
|
-
|
|
|
- Mattia Larentis 2012 - 2013, enhanced by Peter Stein (BdMdesigN)
|
|
|
- <i class="icon-asterisk"> </i> design by BdMdesigN
|
|
|
- </p>
|
|
|
- <p class="pull-right" style="padding-top: 5px;">
|
|
|
- <a href="https://twitter.com/SpiritualGuru">follow me</a> -
|
|
|
- <a href="http://www.larentis.eu">my site</a>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </footer>
|
|
|
-
|
|
|
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
- <script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
|
|
|
- <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
|
|
- <script src="static/js/bootstrap-switch.js"></script>
|
|
|
- <script src="static/js/main.js"></script>
|
|
|
- </body>
|
|
|
|
|
|
+</body>
|
|
|
</html>
|
Stein, Peter