|
|
@@ -29,18 +29,30 @@
|
|
|
<body>
|
|
|
<a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
|
|
|
</a>
|
|
|
+ <header class="header">
|
|
|
+ <div class="container">
|
|
|
+ <h1>Bootstrap Switch <span class="small">v.2.0.0</span></h1>
|
|
|
+ <h2>Turn radio and checkbox form input in switches.</h2>
|
|
|
+ <br>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" 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="110" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="190" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=LostCrew&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ <p class="people">
|
|
|
+ <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> · <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> · <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <hr>
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-sm-10 col-sm-offset-1">
|
|
|
- <header class="jumbotron">
|
|
|
- <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>
|
|
|
- <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
- </header>
|
|
|
- <h2><a name="size" class="anchor" href="#size">Size</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="size" class="anchor" href="#size">Size</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked class="switch-large">
|
|
|
<input type="checkbox" checked>
|
|
|
@@ -48,7 +60,7 @@
|
|
|
<input type="checkbox" checked class="switch-mini">
|
|
|
<br>
|
|
|
<br>
|
|
|
- <span>Dimensions can be changed too:</span>
|
|
|
+ <p>Change the size programmatically:</p>
|
|
|
<input type="checkbox" id="dimension-switch" checked>
|
|
|
<br>
|
|
|
<br>
|
|
|
@@ -74,7 +86,9 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
|
|
|
|
|
|
// Sets a large switch
|
|
|
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</code></pre>
|
|
|
- <h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="colors" class="anchor" href="#colors">Colors</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked data-on="primary" data-off="info">
|
|
|
<input type="checkbox" checked data-on="info" data-off="success">
|
|
|
@@ -84,7 +98,7 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</code></
|
|
|
<input type="checkbox" checked data-on="default" data-off="primary">
|
|
|
<br>
|
|
|
<br>
|
|
|
- <span>Colors can be changed too:</span>
|
|
|
+ <span>Change the colors programmatically:</span>
|
|
|
<input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary">
|
|
|
<br>
|
|
|
<br>
|
|
|
@@ -100,7 +114,9 @@ $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</code></
|
|
|
<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="page-header">
|
|
|
+ <h2><a name="animation" class="anchor" href="#animation">Animation <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="animated-switch" checked data-animated="false">
|
|
|
<br>
|
|
|
@@ -114,46 +130,56 @@ $('#animated-switch').bootstrapSwitch('setAnimated', true);
|
|
|
|
|
|
// Disables animation for the selected item
|
|
|
$('#animated-switch').bootstrapSwitch('setAnimated', false);</code></pre>
|
|
|
- <h2><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked disabled>
|
|
|
<input type="checkbox" checked readonly>
|
|
|
</div>
|
|
|
<pre class="language-markup"><code><input type="checkbox" checked disabled>
|
|
|
<input type="checkbox" checked readonly></code></pre>
|
|
|
- <h2><a name="text" class="anchor" href="#text">Text</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="text" class="anchor" href="#text">Text</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="label-switch" checked data-on-label="SI" data-off-label="NO">
|
|
|
<br>
|
|
|
+ <br>
|
|
|
<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"><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="page-header">
|
|
|
+ <h2><a name="label-text" class="anchor" href="#label-text">Label Text</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" checked data-text-label="TV">
|
|
|
</div>
|
|
|
<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="page-header">
|
|
|
+ <h2><a name="html-text" class="anchor" href="#html-text">HTML Text</a></h2>
|
|
|
+ </div>
|
|
|
<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"><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="page-header">
|
|
|
+ <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML Text Label Icon</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
- <h5>Standard</h5>
|
|
|
- <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>">
|
|
|
- <h5>Font Awesome</h5>
|
|
|
- <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>">
|
|
|
- <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>">
|
|
|
+ Standard <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>">
|
|
|
+ Font Awesome <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>">
|
|
|
+ Flat UI <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"><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>"></code></pre>
|
|
|
- <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>JavaScript</small></a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event Handler <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="switch-change" checked>
|
|
|
</div>
|
|
|
@@ -163,7 +189,9 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</code></pre>
|
|
|
|
|
|
console.log(e, $element, value);
|
|
|
});</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="page-header">
|
|
|
+ <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event Handler <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<label id="label-toggle-switch">Click on this Text to change the switch state</label>
|
|
|
<input type="checkbox" checked class="label-toggle-switch">
|
|
|
@@ -176,7 +204,9 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');</code></pre>
|
|
|
$('.label-toggle-switch').on('switch-change', function (e, data) {
|
|
|
alert(data.value);
|
|
|
});</code></pre>
|
|
|
- <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="toggle-state-switch" checked>
|
|
|
<br>
|
|
|
@@ -189,7 +219,9 @@ $('.label-toggle-switch').on('switch-change', function (e, data) {
|
|
|
<pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('state'); // true || false
|
|
|
$('#toggle-state-switch').bootstrapSwitch('toggleState');
|
|
|
$('#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="page-header">
|
|
|
+ <h2><a name="destroy" class="anchor" href="#destroy">Destroy <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input type="checkbox" id="destroy-switch" checked >
|
|
|
<br>
|
|
|
@@ -197,7 +229,9 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
|
|
|
<button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
|
|
|
</div>
|
|
|
<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="page-header">
|
|
|
+ <h2><a name="create" class="anchor" href="#create">Create <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<input id="create-switch" type="checkbox" checked>
|
|
|
<br>
|
|
|
@@ -205,7 +239,9 @@ $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</
|
|
|
<div id="btn-create" class="btn btn-default">Create</div>
|
|
|
</div>
|
|
|
<pre class="language-javascript"><code>$('#create-switch').bootstrapSwitch();</code></pre>
|
|
|
- <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disable / Readonly <small>javascript</small></a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disable / Readonly <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<label for="disable-switch">Disable controls</label>
|
|
|
<input type="checkbox" id="disable-switch" checked>
|
|
|
@@ -233,13 +269,15 @@ $('#disable-switch').bootstrapSwitch('setDisabled', true); // true || false
|
|
|
$('#readonly-switch').bootstrapSwitch('isReadOnly');
|
|
|
$('#readonly-switch').bootstrapSwitch('toggleReadOnly');
|
|
|
$('#readonly-switch').bootstrapSwitch('setReadOnly', true); // true || false</code></pre>
|
|
|
- <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="form-group">
|
|
|
<label for="option1">Option 1</label>
|
|
|
- <input id="option1" type="radio" name="radio1" value="option1" class="radio1 radio-no-uncheck">
|
|
|
+ <input id="option1" type="radio" name="radio1" value="option1" class="radio1 radio-no-uncheck">
|
|
|
<label for="option2">Option 2</label>
|
|
|
- <input id="option2" type="radio" name="radio1" value="option2" class="radio1 radio-no-uncheck">
|
|
|
+ <input id="option2" type="radio" name="radio1" value="option2" class="radio1 radio-no-uncheck">
|
|
|
<label for="option3">Option 3</label>
|
|
|
<input id="option3" type="radio" name="radio1" value="option3" class="radio1 radio-no-uncheck">
|
|
|
</div>
|
|
|
@@ -265,7 +303,9 @@ $('.radio1').on('switch-change', function () {
|
|
|
$('.radio1').on('switch-change', function () {
|
|
|
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
|
|
|
});</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="page-header">
|
|
|
+ <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck">Radio + uncheck <small>JavaScript</small></a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<div class="form-group">
|
|
|
<label for="option11">Option 1</label>
|
|
|
@@ -287,7 +327,9 @@ $('.radio1').on('switch-change', function () {
|
|
|
<pre class="language-javascript"><code>$('.radio2').on('switch-change', function () {
|
|
|
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
|
|
|
});</code></pre>
|
|
|
- <h2><a name="form" class="anchor" href="#form">Form</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="form" class="anchor" href="#form">Form</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<form class="clearfix" role="form">
|
|
|
<div class="form-group">
|
|
|
@@ -325,7 +367,9 @@ $('.radio1').on('switch-change', function () {
|
|
|
<button type="reset" class="btn btn-inverse">Reset</button>
|
|
|
</div>
|
|
|
</form></code></pre>
|
|
|
- <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
|
|
|
+ <div class="page-header">
|
|
|
+ <h2><a name="modal" class="anchor" href="#modal">Modal</a></h2>
|
|
|
+ </div>
|
|
|
<div class="bs-docs-example">
|
|
|
<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
|
|
|
</div>
|
Emanuele Marchi