|
@@ -33,8 +33,8 @@
|
|
|
<div class="row">
|
|
|
<div class="col-sm-10 col-sm-offset-1">
|
|
|
<header class="jumbotron">
|
|
|
- <h1>Bootstrap switch</h1>
|
|
|
- <h4>by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a></h4>
|
|
|
+ <h1>Bootstrap switch <span class="small">v.2.0.0</span></h1>
|
|
|
+ <h4><a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>) · <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> · <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a></h4>
|
|
|
<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>
|
|
@@ -58,14 +58,12 @@
|
|
|
<button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
|
|
|
<br>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<input type="checkbox" checked class="switch-large">
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked class="switch-large">
|
|
|
<input type="checkbox" checked>
|
|
|
<input type="checkbox" checked class="switch-small">
|
|
|
<input type="checkbox" checked class="switch-mini">
|
|
|
-<input type="checkbox" checked></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-// Resets to the regular style
|
|
|
+<input id="dimension-switch" type="checkbox" checked></code></pre>
|
|
|
+ <pre class="language-javascript"><code>// Resets to the regular style
|
|
|
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
|
|
|
|
|
|
// Sets a mini switch
|
|
@@ -75,7 +73,7 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
|
|
|
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
|
|
|
|
|
|
// Sets a large switch
|
|
|
-$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</pre>
|
|
|
+$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</code></pre>
|
|
|
<h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked data-on="primary" data-off="info">
|
|
@@ -93,16 +91,15 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</pre>
|
|
|
<button id="btn-color-on-switch" class="btn btn-success">Change ON color</button>
|
|
|
<button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked data-on="primary" data-off="info">
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked data-on="primary" data-off="info">
|
|
|
<input type="checkbox" checked data-on="info" data-off="success">
|
|
|
<input type="checkbox" checked data-on="success" data-off="warning">
|
|
|
<input type="checkbox" checked data-on="warning" data-off="danger">
|
|
|
<input type="checkbox" checked data-on="danger" data-off="default">
|
|
|
<input type="checkbox" checked data-on="default" data-off="primary">
|
|
|
-<input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary"></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
|
|
|
-$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
|
|
|
+<input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary"></code></pre>
|
|
|
+ <pre class="language-javascript"><code>$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
|
|
|
+$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</code></pre>
|
|
|
<h2><a name="animation" class="anchor" href="#animation">Animation <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="animated-switch" checked data-animated="false">
|
|
@@ -111,19 +108,17 @@ $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
|
|
|
<button id="btn-animate-switch" class="btn btn-default">Animate</button>
|
|
|
<button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked data-animated="false"></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-// Enables animation for the selected item
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked data-animated="false"></code></pre>
|
|
|
+ <pre class="language-javascript"><code>// Enables animation for the selected item
|
|
|
$('#animated-switch').bootstrapSwitch('setAnimated', true);
|
|
|
|
|
|
// Disables animation for the selected item
|
|
|
-$('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
|
|
|
+$('#animated-switch').bootstrapSwitch('setAnimated', false);</code></pre>
|
|
|
<h2><a name="disabled" class="anchor" href="#disabled">Disabled</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked disabled>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<input type="checkbox" checked disabled></pre>
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked disabled></code></pre>
|
|
|
<h2><a name="text" class="anchor" href="#text">Text</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="label-switch" checked data-on-label="SI" data-off-label="NO">
|
|
@@ -131,20 +126,19 @@ $('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
|
|
|
<button id="btn-label-on-switch" class="btn btn-default">Change "On" label</button>
|
|
|
<button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked data-on-label="SI" data-off-label="NO"></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
|
|
|
-$('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked data-on-label="SI" data-off-label="NO"></code></pre>
|
|
|
+ <pre class="language-javascript"><code>$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
|
|
|
+$('#label-switch').bootstrapSwitch('setOffLabel', 'O');</code></pre>
|
|
|
<h2><a name="label-text" class="anchor" href="#label-text">Label Text</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked data-text-label="TV">
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked data-text-label="TV"></pre>
|
|
|
- <h2><a name="html-text" class="anchor" href="#html-text">HTML text</a></h2>
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked data-text-label="TV"></code></pre>
|
|
|
+ <h2><a name="html-text" class="anchor" href="#html-text">HTML text</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>"></pre>
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked data-on-label="<i class='icon-ok icon-white'></i>" data-offlabel="<i class='icon-remove'></i>"></code></pre>
|
|
|
<h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML text Label Icon</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<h5>Standard</h5>
|
|
@@ -154,20 +148,19 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
|
|
|
<h5>Flat UI</h5>
|
|
|
<input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
|
|
|
</div>
|
|
|
- <pre class="language-markup"><input type="checkbox" checked class="switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
+ <pre class="language-markup"><code><input type="checkbox" checked class="switch-large" data-label-icon="icon-fullscreen" data-onlabel="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
|
|
|
<input type="checkbox" checked class="switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
|
|
|
-<input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>"></pre>
|
|
|
+<input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>"></code></pre>
|
|
|
<h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>JavaScript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="switch-change" checked>
|
|
|
</div>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#switch-change').on('switch-change', function (e, data) {
|
|
|
+ <pre class="language-javascript"><code>$('#switch-change').on('switch-change', function (e, data) {
|
|
|
var $element = $(data.el),
|
|
|
value = data.value;
|
|
|
|
|
|
console.log(e, $element, value);
|
|
|
-});</pre>
|
|
|
+});</code></pre>
|
|
|
<h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event handler <small>JavaScript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<h5>Label 1</h5>
|
|
@@ -180,17 +173,15 @@ $('#switch-change').on('switch-change', function (e, data) {
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<label id="label-toggle-switch">Click on this Text to change the switch state</label>
|
|
|
+ <pre class="language-markup"><code><label id="label-toggle-switch">Click on this Text to change the switch state</label>
|
|
|
<input type="checkbox" checked />
|
|
|
|
|
|
<div id="label2-toggle-switch">
|
|
|
<label class="label-change-switch">Click on this Text to change the switch state
|
|
|
<input type="checkbox" checked />
|
|
|
</label>
|
|
|
-</div></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#label-toggle-switch').on('click', function(e, data) {
|
|
|
+</div></code></pre>
|
|
|
+ <pre class="language-javascript"><code>$('#label-toggle-switch').on('click', function(e, data) {
|
|
|
$('.label-toggle-switch').bootstrapSwitch('toggleState');
|
|
|
});
|
|
|
$('.label-toggle-switch').on('switch-change', function (e, data) {
|
|
@@ -198,7 +189,7 @@ $('.label-toggle-switch').on('switch-change', function (e, data) {
|
|
|
});
|
|
|
$('#label2-toggle-switch').on('switch-change', function(e, data) {
|
|
|
alert(data.value);
|
|
|
-});</pre>
|
|
|
+});</code></pre>
|
|
|
<h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="toggle-state-switch" checked>
|
|
@@ -209,10 +200,9 @@ $('#label2-toggle-switch').on('switch-change', function(e, data) {
|
|
|
<div id="toggle-state-switch-button" class="btn btn-default">Toggle me!</div>
|
|
|
<div id="toggle-state-switch-button-off" class="btn btn-default">OFF!</div>
|
|
|
</div>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
|
|
|
+ <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
|
|
|
$('#toggle-state-switch').bootstrapSwitch('toggleState');
|
|
|
-$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
|
|
|
+$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</code></pre>
|
|
|
<h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="destroy-switch" checked >
|
|
@@ -220,16 +210,16 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
|
|
|
<br>
|
|
|
<button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
|
|
|
</div>
|
|
|
- <pre class="language-javascript">$('#destroy-switch').bootstrapSwitch('destroy');</pre>
|
|
|
- <h2><a name="create" class="anchor" href="#create">Create <small>javascript</small></a></h2>
|
|
|
+ <pre class="language-javascript"><code>$('#destroy-switch').bootstrapSwitch('destroy');</code></pre>
|
|
|
+ <h2><a name="create" class="anchor" href="#create">Create <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<input id="create-switch" type="checkbox" checked>
|
|
|
<br>
|
|
|
<br>
|
|
|
<div id="btn-create" class="btn btn-default">Create</div>
|
|
|
</div>
|
|
|
- <pre class="language-javascript">$('#create-switch').bootstrapSwitch();</pre>
|
|
|
- <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
|
|
|
+ <pre class="language-javascript"><code>$('#create-switch').bootstrapSwitch();</code></pre>
|
|
|
+ <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<label for="disable-switch-input">amazing label</label>
|
|
|
<input type="checkbox" id="disable-switch" checked>
|
|
@@ -240,10 +230,9 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
|
|
|
<button id="btn-disable-switch" class="btn btn-default">Disable!</button>
|
|
|
<button id="btn-activate-switch" class="btn btn-default">Activate!</button>
|
|
|
</div>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('#disable-switch').bootstrapSwitch('isActive');
|
|
|
+ <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('isActive');
|
|
|
$('#disable-switch').bootstrapSwitch('toggleActivation');
|
|
|
-$('#disable-switch').bootstrapSwitch('setActive', false); // true || false</pre>
|
|
|
+$('#disable-switch').bootstrapSwitch('setActive', false); // true || false</code></pre>
|
|
|
<h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="form-group">
|
|
@@ -255,17 +244,15 @@ $('#disable-switch').bootstrapSwitch('setActive', false); // true || false</pre
|
|
|
<input id="option3" type="radio" name="radio1" value="option3" class="radio1 radio-no-uncheck">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<div class="form-group">
|
|
|
+ <pre class="language-markup"><code><div class="form-group">
|
|
|
<label for="option1">Option 1</label>
|
|
|
<input id="option1" type="radio" name="radio1" value="option1">
|
|
|
<label for="option2">Option 2</label>
|
|
|
<input id="option2" type="radio" name="radio1" value="option2">
|
|
|
<label for="option3">Option 3</label>
|
|
|
<input id="option3" type="radio" name="radio1" value="option3">
|
|
|
-</div></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('.radio1').on('switch-change', function () {
|
|
|
+</div></code></pre>
|
|
|
+ <pre class="language-javascript"><code>$('.radio1').on('switch-change', function () {
|
|
|
$('.radio1').bootstrapSwitch('toggleRadioState');
|
|
|
});
|
|
|
|
|
@@ -277,7 +264,7 @@ $('.radio1').on('switch-change', function () {
|
|
|
// or
|
|
|
$('.radio1').on('switch-change', function () {
|
|
|
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
|
|
|
-});</pre>
|
|
|
+});</code></pre>
|
|
|
<h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><small>javascript (allow radios uncheck)</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="form-group">
|
|
@@ -289,19 +276,17 @@ $('.radio1').on('switch-change', function () {
|
|
|
<input id="option13" type="radio" name="radio2" value="option13" class="radio2">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<div class="form-group">
|
|
|
- <label for="option11">Option 1</label>
|
|
|
- <input id="option11" type="radio" name="radio2" value="option1">
|
|
|
- <label for="option12">Option 2</label>
|
|
|
- <input id="option12" type="radio" name="radio2" value="option2" checked="checked">
|
|
|
- <label for="option13">Option 3</label>
|
|
|
- <input id="option13" type="radio" name="radio2" value="option3">
|
|
|
-</div></pre>
|
|
|
- <pre class="language-javascript">
|
|
|
-$('.radio2').on('switch-change', function () {
|
|
|
+ <pre class="language-markup"><code><div class="form-group">
|
|
|
+ <label for="option11">Option 1</label>
|
|
|
+ <input id="option11" type="radio" name="radio2" value="option1">
|
|
|
+ <label for="option12">Option 2</label>
|
|
|
+ <input id="option12" type="radio" name="radio2" value="option2" checked="checked">
|
|
|
+ <label for="option13">Option 3</label>
|
|
|
+ <input id="option13" type="radio" name="radio2" value="option3">
|
|
|
+</div></code></pre>
|
|
|
+ <pre class="language-javascript"><code>$('.radio2').on('switch-change', function () {
|
|
|
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
|
|
|
-});</pre>
|
|
|
+});</code></pre>
|
|
|
<h2><a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<form class="clearfix" role="form">
|
|
@@ -323,8 +308,7 @@ $('.radio2').on('switch-change', function () {
|
|
|
</form>
|
|
|
<div ></div>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<form class="form-horizontal">
|
|
|
+ <pre class="language-markup"><code><form class="form-horizontal">
|
|
|
<div class="form-group">
|
|
|
<label class="control-label" for="inputEmail">Email</label>
|
|
|
<input type="text" id="inputEmail" placeholder="Email">
|
|
@@ -340,17 +324,16 @@ $('.radio2').on('switch-change', function () {
|
|
|
<div class="form-actions">
|
|
|
<button type="reset" class="btn btn-inverse">Reset</button>
|
|
|
</div>
|
|
|
-</form></pre>
|
|
|
+</form></code></pre>
|
|
|
<h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
|
|
|
<div class="bs-docs-example">
|
|
|
<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
|
|
|
</div>
|
|
|
- <pre class="language-markup">
|
|
|
-<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
|
|
|
+ <pre class="language-markup"><code><a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
<input type="checkbox" checked>
|
|
|
-</div></pre>
|
|
|
+</div></code></pre>
|
|
|
<footer class="footer">
|
|
|
<p>© by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it/" target="_blank">Emanuele Marchi</a></p>
|
|
|
</footer>
|