Subversion Repositories bacoAlunos

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1329 jmachado 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
        <script> if (window.location.href.indexOf('minhur.github.io') > 0) window.location.replace('http://www.bootstraptoggle.com') </script>
5 
        <meta charset="UTF-8">
6 
        <meta name="viewport" content="width=device-width, initial-scale=1">
7 
        <meta name="msvalidate.01" content="3638AEFC99423BA5CB586805286C39AA" />
8 
        <meta name="description" content="Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles." />
9 
        <meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch" />
10 
        <meta name="author" content="metatags generator">
11 
        <meta name="robots" content="index, follow">
12 
        <meta name="revisit-after" content="1 month">
13 
        <title>Bootstrap Toggle</title>
14 
        <link rel="canonical" href="http://www.bootstraptoggle.com">
15 
        <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
16 
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
17 
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
18 
        <link href="css/bootstrap-toggle.css" rel="stylesheet">
19 
        <link href="doc/stylesheet.css" rel="stylesheet">
20 
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
21 
</head>
22 
<body>
23 
        <header>
24 
                <nav class="navbar navbar-default container" role="navigation">
25 
                        <div class="container">
26 
                                <div class="navbar-header">
27 
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
28 
                                                <span class="sr-only">Toggle navigation</span>
29 
                                                <span class="icon-bar"></span>
30 
                                                <span class="icon-bar"></span>
31 
                                                <span class="icon-bar"></span>
32 
                                        </button>
33 
                                        <a class="navbar-brand" href="#">Bootstrap Toggle</a>
34 
                                </div>
35 
                                <div id="navbar" class="collapse navbar-collapse">
36 
                                        <ul class="nav navbar-nav navbar-right">
37 
                                                <li><a href="#usage">Usage</a></li>
38 
                                                <li><a href="#api">API</a></li>
39 
                                                <li><a href="#events">Events</a></li>
40 
                                                <li><a href="#demos">Demos</a></li>
41 
                                                <li><a href="https://github.com/minhur/bootstrap-toggle/issues">Issues</a></li>
42 
                                                <li><a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">Download</a></li>
43 
                                                <li>
44 
                                                        <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
45 
                                                </li>
46 
                                                <li>
47 
                                                        <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
48 
                                                </li>
49 
                                        </ul>
50 
                                </div>
51 
                        </div>
52 
                </nav>
53 
                <div class="mast-head">
54 
                        <div class="container">
55 
                                <h1>Bootstrap Toggle</h1>
56 
                                <p>Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles</p>
57 
                                <div class="mast-links">
58 
                                        <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe>
59 
                                        <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30"></iframe>
60 
                                </div>
61 
                        </div>
62 
                </div>
63 
        </header>
64 
 
65 
        <main>
66 
                <div class="container">
67 
                        <h2>Getting Started</h2>
68 
                        <hr>
69 
                        <h3>Installation</h3>
70 
                        <p>You can <a href="https://github.com/minhur/bootstrap-toggle/archive/master.zip">download</a> the latest version of Bootstrap Toggle or use CDN to load the library.</p>
71 
                        <p><span class="label label-warning">Warning</span> If you are using Bootstrap v2.3.2, use <code>bootstrap2-toggle.min.js</code> and <code>bootstrap2-toggle.min.css</code> instead.</p>
72 
                        <code class="highlight">&lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
73 
&lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;</code>
74 
 
75 
                        <h3>Bower Install</h3>
76 
                        <p></p>
77 
                        <code class="highlight bash">bower install bootstrap-toggle</code>
78 
                </div>
79 
                <div id="usage" class="container">
80 
                        <h2>Usage</h2>
81 
                        <hr>
82 
 
83 
                        <h3>Basic example</h3>
84 
                        <p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p>
85 
                        <div class="example">
86 
                                <input type="checkbox" checked data-toggle="toggle">
87 
                        </div>
88 
 
89 
                        <h3>Stacked checkboxes</h3>
90 
                        <p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create stacked checkboxes. Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p>
91 
                        <div class="example">
92 
                                <div class="checkbox">
93 
                                        <label>
94 
                                                <input type="checkbox" data-toggle="toggle">
95 
                                                Option one is enabled
96 
                                        </label>
97 
                                </div>
98 
                                <div class="checkbox disabled">
99 
                                        <label>
100 
                                                <input type="checkbox" disabled data-toggle="toggle">
101 
                                                Option two is disabled
102 
                                        </label>
103 
                                </div>
104 
                        </div>
105 
 
106 
                        <h3>Inline Checkboxes</h3>
107 
                        <p>Refer to Bootstrap <a href="http://getbootstrap.com/css/#forms-controls" target="_blank">Form Controls</a> documentation to create inline checkboxes. Simply add <code>data-toggle="toggle"</code> to a convert checkboxes into toggles.</p>
108 
                        <div class="example">
109 
                                <label class="checkbox-inline">
110 
                                        <input type="checkbox" checked data-toggle="toggle"> First
111 
                                </label>
112 
                                <label class="checkbox-inline">
113 
                                        <input type="checkbox" data-toggle="toggle"> Second
114 
                                </label>
115 
                                <label class="checkbox-inline">
116 
                                        <input type="checkbox" data-toggle="toggle"> Third
117 
                                </label>
118 
                        </div>
119 
                </div>
120 
 
121 
                <div id="api" class="container">
122 
                        <h2>API</h2>
123 
                        <hr>
124 
 
125 
                        <h3>Initialize by JavaScript</h3>
126 
                        <p>Initialize toggles with id <code>toggle-one</code> with a single line of JavaScript.</p>
127 
                        <div class="example">
128 
                                <input id="toggle-one" checked type="checkbox">
129 
                                <script>
130 
                                        $(function() {
131 
                                                $('#toggle-one').bootstrapToggle();
132 
                                        })
133 
                                </script>
134 
                        </div>
135 
 
136 
                        <h3>Options</h3>
137 
                        <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-on="Enabled"</code>.</p>
138 
                        <div class="example">
139 
                                <input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
140 
                                <input type="checkbox" id="toggle-two">
141 
                                <script>
142 
                                        $(function() {
143 
                                                $('#toggle-two').bootstrapToggle({
144 
                                                        on: 'Enabled',
145 
                                                        off: 'Disabled'
146 
                                                });
147 
                                        })
148 
                                </script>
149 
                        </div>
150 
                        <div class="table-responsive">
151 
                                <table class="table table-striped table-condensed">
152 
                                <thead>
153 
                                <tr>
154 
                                        <th>Name</th>
155 
                                        <th>Type</th>
156 
                                        <th>Default</th>
157 
                                        <th>Description</th>
158 
                                </tr>
159 
                                </thead>
160 
                                <tbody>
161 
                                <tr>
162 
                                        <td>on</td>
163 
                                        <td>string | html</td>
164 
                                        <td><code>"On"</code></td>
165 
                                        <td>Text of the <em>on</em> toggle</td>
166 
                                </tr>
167 
                                <tr>
168 
                                        <td>off</td>
169 
                                        <td>string | html</td>
170 
                                        <td><code>"Off"</code></td>
171 
                                        <td>Text of the <em>off</em> toggle</td>
172 
                                </tr>
173 
                                <tr>
174 
                                        <td>size</td>
175 
                                        <td>string</td>
176 
                                        <td><code>"normal"</code></td>
177 
                                        <td>
178 
                                                Size of the toggle. Possible values are:<code>large</code>,<code>normal</code>,<code>small</code>,<code>mini</code><br>
179 
                                                Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information.
180 
                                        </td>
181 
                                </tr>
182 
                                <tr>
183 
                                        <td>onstyle</td>
184 
                                        <td>string</td>
185 
                                        <td><code>"primary"</code></td>
186 
                                        <td>
187 
                                                Style of the <em>on</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
188 
                                                Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.
189 
                                        </td>
190 
                                </tr>
191 
                                <tr>
192 
                                        <td>offstyle</td>
193 
                                        <td>string</td>
194 
                                        <td><code>"default"</code></td>
195 
                                        <td>
196 
                                                Style of the <em>off</em> toggle.<br>Possible values are:<code>default</code>,<code>primary</code>,<code>success</code>,<code>info</code>,<code>warning</code>,<code>danger</code><br>
197 
                                                Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.
198 
                                        </td>
199 
                                </tr>
200 
                                <tr>
201 
                                        <td>style</td>
202 
                                        <td>string</td>
203 
                                        <td></td>
204 
                                        <td>
205 
                                                Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
206 
                                        </td>
207 
                                </tr>
208 
                                <tr>
209 
                                        <td>width</td>
210 
                                        <td>integer</td>
211 
                                        <td><em>null</em></td>
212 
                                        <td>
213 
                                                Sets the width of the toggle. if set to <em>null</em>, width will be calculated.
214 
                                        </td>
215 
                                </tr>
216 
                                <tr>
217 
                                        <td>height</td>
218 
                                        <td>integer</td>
219 
                                        <td><em>null</em></td>
220 
                                        <td>
221 
                                                Sets the height of the toggle. if set to <em>null</em>, height will be calculated.
222 
                                        </td>
223 
                                </tr>
224 
                                </tbody>
225 
                                </table>
226 
                        </div>
227 
 
228 
                        <h3>Methods</h3>
229 
                        <p>Methods can be used to control toggles directly.</p>
230 
                        <div class="example">
231 
                                <input id="toggle-demo" type="checkbox" data-toggle="toggle">
232 
                        </div>
233 
                        <div class="table-responsive">
234 
                                <table class="table table-striped table-condensed">
235 
                                <thead>
236 
                                <tr>
237 
                                        <th>Method</th>
238 
                                        <th>Example</th>
239 
                                        <th>Description</th>
240 
                                        <th>Demo</th>
241 
                                </tr>
242 
                                </thead>
243 
                                <tbody>
244 
                                <tr>
245 
                                        <td><em>initialize</em></td>
246 
                                        <td><code>$('#toggle-demo').bootstrapToggle()</code></td>
247 
                                        <td>Initializes the toggle plugin with options</td>
248 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.init('#toggle-demo')">Initialize</button></td>
249 
                                </tr>
250 
                                <tr>
251 
                                        <td>destroy</td>
252 
                                        <td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td>
253 
                                        <td>Destroys the toggle</td>
254 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.destroy('#toggle-demo')">Destroy</button></td>
255 
                                </tr>
256 
                                <tr>
257 
                                        <td>on</td>
258 
                                        <td><code>$('#toggle-demo').bootstrapToggle('on')</code></td>
259 
                                        <td>Sets the toggle to 'On' state</td>
260 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.on('#toggle-demo')">On</button></td>
261 
                                </tr>
262 
                                <tr>
263 
                                        <td>off</td>
264 
                                        <td><code>$('#toggle-demo').bootstrapToggle('off')</code></td>
265 
                                        <td>Sets the toggle to 'Off' state</td>
266 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.off('#toggle-demo')">Off</button></td>
267 
                                </tr>
268 
                                <tr>
269 
                                        <td>toggle</td>
270 
                                        <td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td>
271 
                                        <td>Toggles the state of the toggle</td>
272 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.toggle('#toggle-demo')">Toggle</button></td>
273 
                                </tr>
274 
                                <tr>
275 
                                        <td>enable</td>
276 
                                        <td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td>
277 
                                        <td>Enables the toggle</td>
278 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.enable('#toggle-demo')">Enable</button></td>
279 
                                </tr>
280 
                                <tr>
281 
                                        <td>disable</td>
282 
                                        <td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td>
283 
                                        <td>Disables the toggle</td>
284 
                                        <td><button class="btn btn-default btn-xs" onclick="demo.disable('#toggle-demo')">Disable</button></td>
285 
                                </tr>
286 
                                </tbody>
287 
                                </table>
288 
                        </div>
289 
                </div>
290 
 
291 
 
292 
                <div id="events" class="container">
293 
                        <h2>Events</h2>
294 
                        <hr>
295 
 
296 
                        <h3>Event Propagation</h3>
297 
                        <p><span class="label label-primary">Note</span> All events are propagated to and from input element to the toggle. </p>
298 
                        <p>You should listen to events from the <code>&lt;input type="checkbox"></code> directly rather than look for custom events.</p>
299 
                        <div class="example">
300 
                                <input id="toggle-event" type="checkbox" data-toggle="toggle">
301 
                                <div id="console-event"></div>
302 
                                <script>
303 
                                        $(function() {
304 
                                                $('#toggle-event').change(function() {
305 
                                                        $('#console-event').html('Toggle: ' + $(this).prop('checked'))
306 
                                                })
307 
                                        })
308 
                                </script>
309 
                        </div>
310 
 
311 
                        <h3>API vs Input</h3>
312 
                        <p>This also means that using the API or Input to trigger events will work both ways.</p>
313 
                        <div class="example">
314 
                                <input id="toggle-trigger" type="checkbox" data-toggle="toggle">
315 
                                <button class="btn btn-success" onclick="toggleOn()">On by API</button>
316 
                                <button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
317 
                                <button class="btn btn-success" onclick="toggleOnByInput()">On by Input</button>
318 
                                <button class="btn btn-danger" onclick="toggleOffByInput()">Off by Input</button>
319 
                                <script>
320 
                                        function toggleOn() {
321 
                                                $('#toggle-trigger').bootstrapToggle('on')
322 
                                        }
323 
                                        function toggleOff() {
324 
                                                $('#toggle-trigger').bootstrapToggle('off')    
325 
                                        }
326 
                                        function toggleOnByInput() {
327 
                                                $('#toggle-trigger').prop('checked', true).change()
328 
                                        }
329 
                                        function toggleOffByInput() {
330 
                                                $('#toggle-trigger').prop('checked', false).change()
331 
                                        }
332 
                                </script>
333 
                        </div>
334 
                </div>
335 
 
336 
                <div id="demos" class="container">
337 
                        <h2>Demos</h2>
338 
                        <hr>
339 
 
340 
                        <h3>Sizes</h3>
341 
                        <p>Bootstrap toggle is available in different sizes. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-sizes" target="_blank">Button Sizes</a> documentation for more information.</p>
342 
                        <div class="example">
343 
                                <input type="checkbox" checked data-toggle="toggle" data-size="large">
344 
                                <input type="checkbox" checked data-toggle="toggle" data-size="normal">
345 
                                <input type="checkbox" checked data-toggle="toggle" data-size="small">
346 
                                <input type="checkbox" checked data-toggle="toggle" data-size="mini">
347 
                        </div>
348 
 
349 
                        <h3>Custom Sizes</h3>
350 
                        <p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p>
351 
                        <div class="example">
352 
                                <input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75">
353 
                                <input type="checkbox" checked data-toggle="toggle" data-height="75">
354 
                                <input type="checkbox" checked data-toggle="toggle" data-width="100">
355 
                        </div>
356 
 
357 
                        <h3>Colors</h3>
358 
                        <p>Bootstrap Toggle supports various colors. Refer to Bootstrap <a href="http://getbootstrap.com/css/#buttons-options" target="_blank">Button Options</a> documentation for more information.</p>
359 
                        <div class="example">
360 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
361 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
362 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
363 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
364 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
365 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="default">
366 
                        </div>
367 
 
368 
                        <h3>Colors Mix</h3>
369 
                        <p>You can style on state as well as the off state.</p>
370 
                        <div class="example">
371 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
372 
                                <input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info">
373 
                        </div>
374 
 
375 
                        <h3>Custom Style</h3>
376 
                        <p>Customized styles can be applied as easily.</p>
377 
                        <div class="example">
378 
                                <style>
379 
                                        .toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
380 
                                        .toggle.ios .toggle-handle { border-radius: 20px; }
381 
                                </style>
382 
                                <input type="checkbox" checked data-toggle="toggle" data-style="ios">
383 
                                <style>
384 
                                        .toggle.android { border-radius: 0px;}
385 
                                        .toggle.android .toggle-handle { border-radius: 0px; }
386 
                                </style>
387 
                                <input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info">
388 
                        </div>
389 
 
390 
                        <h3>Custom Text</h3>
391 
                        <p>The text can be changed easily with attributes or options.</p>
392 
                        <div class="example">
393 
                                <input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
394 
                        </div>
395 
 
396 
                        <h3>Icons/Html Text</h3>
397 
                        <p>You can easily add icons or images since html is supported for on/off text.</p>
398 
                        <div class="example">
399 
                                <input type="checkbox" checked data-toggle="toggle" data-on="<i class='fa fa-play'></i> Play" data-off="<i class='fa fa-pause'></i> Pause">
400 
                        </div>
401 
 
402 
                        <h3>Multiple Lines of Text</h3>
403 
                        <p>Toggles with multiple lines will adjust its heights.</p>
404 
                        <div class="example">
405 
                                <input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World">
406 
                        </div>
407 
 
408 
                        <h3>Animation Speed</h3>
409 
                        <p>Transition speed can be easily controlled with css <code>transition</code> property on <code>.toggle-group</code>. You can also turn animation off completely.</p>
410 
                        <div class="example">
411 
                                <style>
412 
                                        .slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
413 
                                        .fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
414 
                                        .quick .toggle-group { transition: none; -webkit-transition: none; }
415 
                                </style>
416 
                                <input type="checkbox" checked data-toggle="toggle" data-style="slow">
417 
                                <input type="checkbox" checked data-toggle="toggle" data-class="fast">
418 
                                <input type="checkbox" checked data-toggle="toggle" data-style="quick">
419 
                        </div>
420 
                <div>
421 
        </main>
422 
        <footer>
423 
                <div class="container">
424 
                        <p>
425 
                                <img class="nyt-logo" src="doc/nyt.png">
426 
                                <img class="nyt-logo" src="doc/nytdev.svg">
427 
                        </p>
428 
                        <p>Designed and built by <a href="https://github.com/minhur" target="_blank">Min Hur</a> for <a href="http://developers.nytimes.com" target="_blank">The New York Times Company</a></p>
429 
                        <p>Latest Version: 2.2.0 | Code licensed under MIT</p>
430 
                        <p>
431 
                                <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
432 
                                <iframe src="https://mdo.github.io/github-buttons/github-btn.html?user=minhur&repo=bootstrap-toggle&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
433 
                        </p>
434 
                </div>
435 
        </footer>
436 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
437 
        <script src="doc/script.js"></script>
438 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
439 
        <script src="js/bootstrap-toggle.js"></script>
440 
        <script>
441 
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
442 
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
443 
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
444 
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
445 
                ga('create', 'UA-55669452-1', 'auto');
446 
                ga('send', 'pageview');
447 
        </script>
448 
</body>
449 
</html>