Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
<!doctype html>
2 
<html lang="en">
3 
<head>
4 
	<meta charset="UTF-8">
5 
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 
	<meta name="description" content="Bootstrap 4 Toggle is a bootstrap plugin that converts checkboxes into responsive toggles.">
7 
	<meta name="keywords" content="bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch, bootstrap-checkbox">
8 
	<meta name="author" content="https://github.com/gitbrent">
9 
	<meta name="version" content="v3.7.0">
10 
	<meta name="robots" content="index, follow">
11 
	<meta name="revisit-after" content="1 month">
12 
	<title>Bootstrap 4 Toggle Switch Button Checkbox</title>
13 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css">
14 
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
15 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
16 
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
17 
	<link rel="stylesheet" href="css/bootstrap4-toggle.css">
18 
	<link rel="stylesheet" href="doc/stylesheet.css">
19 
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
20 
</head>
21 
<body>
22 
	<header>
23 
		<nav class="navbar navbar-expand-lg navbar-light bg-light container mb-3" role="navigation">
24 
			<a class="navbar-brand" href="#">Bootstrap 4 Toggle</a>
25 
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
26 
				<span class="navbar-toggler-icon"></span>
27 
			</button>
28 
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
29 
				<ul class="navbar-nav ml-auto align-items-center">
30 
					<li class="nav-item active">
31 
						<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
32 
					</li>
33 
					<li class="nav-item"><a class="nav-link" href="#installation">Installation</a></li>
34 
					<li class="nav-item"><a class="nav-link" href="#demos">Demos</a></li>
35 
					<li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#usage">Usage</a></li>
36 
					<li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#api">API</a></li>
37 
					<li class="nav-item"><a class="nav-link d-none d-sm-none d-md-block" href="#events">Events</a></li>
38 
					<li class="nav-item"><a class="nav-link" href="https://github.com/gitbrent/bootstrap4-toggle/">GitHub</a></li>
39 
					<li class="nav-item"><a class="nav-link" href="https://github.com/gitbrent/bootstrap4-toggle/archive/master.zip">Download</a></li>
40 
				</ul>
41 
			</div>
42 
		</nav>
43 
		<div class="mast-head">
44 
			<div class="container">
45 
				<h1>Bootstrap Switch Button</h1>
46 
				<p><strong>Bootstrap Toggle</strong> is a jQuery plugin/widget that converts plain checkboxes into responsive toggle switch buttons.</p>
47 
				<!--<div class="mast-links">
48 
					<iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
49 
					<iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=star&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
50 
				</div>-->
51 
			</div>
52 
		</div>
53 
	</header>
54 
	<main>
55 
		<section id="updated" class="container my-5">
56 
			<div class="alert alert-success" role="alert">
57 
				<h3 class="alert-heading">Made for Bootstrap 4!</h3>
58 
				<h6 class="font-weight-light">This page and all of the switch buttons shown are running on Bootstrap 4.3</h6>
59 
				<hr>
60 
				<div class="row">
61 
					<div class="col-12 col-md-4 mb-1 mb-md-0">
62 
						<div class="row align-items-center">
63 
							<div class="col-2 p-0 p-md-2 text-right">
64 
								<i class="fas fa-check-circle text-success d-none  d-sm-none  d-md-none  d-lg-block" style="font-size:48px"></i>
65 
								<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
66 
							</div>
67 
							<div class="col-10">
68 
								Supports touch events
69 
							</div>
70 
						</div>
71 
					</div>
72 
					<div class="col-12 col-md-4 mb-1 mb-md-0">
73 
						<div class="row align-items-center">
74 
							<div class="col-2 p-0 p-md-2 text-right">
75 
								<i class="fas fa-check-circle text-success d-none  d-sm-none  d-md-none  d-lg-block" style="font-size:48px"></i>
76 
								<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
77 
							</div>
78 
							<div class="col-10">
79 
								Supports outline colors
80 
							</div>
81 
						</div>
82 
					</div>
83 
					<div class="col-12 col-md-4 mb-1 mb-md-0">
84 
						<div class="row align-items-center">
85 
							<div class="col-2 p-0 p-md-2 text-right">
86 
								<i class="fas fa-check-circle text-success d-none  d-sm-none  d-md-none  d-lg-block" style="font-size:48px"></i>
87 
								<i class="fas fa-check-circle text-success d-block d-sm-block d-md-block d-lg-none " style="font-size:24px"></i>
88 
							</div>
89 
							<div class="col-10">
90 
								Includes a mini (-xs) size
91 
							</div>
92 
						</div>
93 
					</div>
94 
				</div>
95 
			</div>
96 
		</section>
97 
 
98 
		<section id="installation" class="container my-5">
99 
			<h2>Installation</h2>
100 
			<hr>
101 
 
102 
			<h3 class="text-secondary mt-4">CDN</h3>
103 
			<code class="highlight">&lt;link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"&gt;
104 
&lt;script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"&gt;&lt;/script&gt;</code>
105 
 
106 
			<h3 class="text-secondary mt-4">Download</h3>
107 
			<a href="https://github.com/gitbrent/bootstrap4-toggle/releases/latest">GitHub Latest release</a>
108 
 
109 
			<h3 class="text-secondary mt-4">NPM</h3>
110 
			<code class="highlight">npm install bootstrap4-toggle</code>
111 
 
112 
			<h3 class="text-secondary mt-4">Yarn</h3>
113 
			<code class="highlight">yarn add bootstrap4-toggle</code>
114 
		</section>
115 
 
116 
		<section id="demos" class="container my-5">
117 
			<h2>Demos</h2>
118 
			<hr>
119 
 
120 
			<h3 class="text-secondary mt-4">Sizes</h3>
121 
			<p>Bootstrap toggle is available in different sizes.</p>
122 
			<div class="example">
123 
				<input type="checkbox" checked data-toggle="toggle" data-size="lg">
124 
				<input type="checkbox" checked data-toggle="toggle">
125 
				<input type="checkbox" checked data-toggle="toggle" data-size="sm">
126 
				<input type="checkbox" checked data-toggle="toggle" data-size="xs">
127 
			</div>
128 
 
129 
			<h3 class="text-secondary mt-4">Custom Sizes</h3>
130 
			<p>Bootstrap toggle can handle custom sizes by <code>data-width</code> and <code>data-height</code> options.</p>
131 
			<div class="example">
132 
				<input type="checkbox" checked data-toggle="toggle" data-width="100" data-height="75">
133 
				<input type="checkbox" checked data-toggle="toggle" data-height="75">
134 
				<input type="checkbox" checked data-toggle="toggle" data-width="100">
135 
			</div>
136 
 
137 
			<h3 class="text-secondary mt-4">Colors</h3>
138 
			<p>Bootstrap Toggle implements all standard bootstrap 4 button colors.</p>
139 
			<div class="example">
140 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
141 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary">
142 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
143 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
144 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
145 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
146 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="light">
147 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="dark">
148 
			</div>
149 
 
150 
			<h3 class="text-secondary mt-4">Outline Colors</h3>
151 
			<p>Bootstrap Toggle implements all standard bootstrap 4 button outline colors.</p>
152 
			<div class="example">
153 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-primary"   data-offstyle="outline-secondary">
154 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-secondary" data-offstyle="outline-success">
155 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-success"   data-offstyle="outline-danger">
156 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-danger"    data-offstyle="outline-warning">
157 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-warning"   data-offstyle="outline-info">
158 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-info"      data-offstyle="outline-light">
159 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-light"     data-offstyle="outline-dark">
160 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-dark"      data-offstyle="outline-primary">
161 
			</div>
162 
 
163 
			<h3 class="text-secondary mt-4">Dark Theme Colors</h3>
164 
			<p>Bootstrap Toggle colors look great on dark backgrounds.</p>
165 
			<div class="example bg-dark">
166 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary"   data-offstyle="secondary">
167 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary" data-offstyle="success">
168 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="success"   data-offstyle="danger">
169 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger"    data-offstyle="warning">
170 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning"   data-offstyle="info">
171 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="info"      data-offstyle="light">
172 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="light"     data-offstyle="dark" data-style="border">
173 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="dark"      data-offstyle="light" data-style="border">
174 
			</div>
175 
 
176 
			<h3 class="text-secondary mt-4">Dark Theme Outline Colors</h3>
177 
			<p>Bootstrap Toggle outline colors look great on dark backgrounds.</p>
178 
			<div class="example bg-dark">
179 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-primary"   data-offstyle="outline-secondary">
180 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-secondary" data-offstyle="outline-success">
181 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-success"   data-offstyle="outline-danger">
182 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-danger"    data-offstyle="outline-warning">
183 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-warning"   data-offstyle="outline-info">
184 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-info"      data-offstyle="outline-light">
185 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-light"     data-offstyle="outline-dark" data-style="border">
186 
				<input type="checkbox" checked data-toggle="toggle" data-onstyle="outline-dark"      data-offstyle="outline-light" data-style="border">
187 
			</div>
188 
 
189 
			<h3 class="text-secondary mt-4">Custom Style</h3>
190 
			<p>Style the buttons to fit an existing UX.</p>
191 
			<div class="example">
192 
				<!-- iOS Style: Rounded -->
193 
				<style>
194 
					.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }
195 
					.toggle.ios .toggle-handle { border-radius: 20rem; }
196 
				</style>
197 
				<input type="checkbox" checked data-toggle="toggle" data-style="ios">
198 
				<!-- Android Style: No radius -->
199 
				<style>
200 
					.toggle.android { border-radius: 0px;}
201 
					.toggle.android .toggle-handle { border-radius: 0px; }
202 
				</style>
203 
				<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="info">
204 
			</div>
205 
 
206 
			<h3 class="text-secondary mt-4">Custom Text</h3>
207 
			<p>The text can be changed easily with attributes or options.</p>
208 
			<div class="example">
209 
				<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
210 
			</div>
211 
 
212 
			<h3 class="text-secondary mt-4">HTML, Icons, Images</h3>
213 
			<p>You can easily add icons or images since html is supported for on/off text.</p>
214 
			<div class="example">
215 
				<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">
216 
			</div>
217 
 
218 
			<h3 class="text-secondary mt-4">Multiple Lines of Text</h3>
219 
			<p>Toggles with multiple lines will adjust its heights.</p>
220 
			<div class="example">
221 
				<input type="checkbox" checked data-toggle="toggle" data-on="Hello<br>World" data-off="Goodbye<br>World">
222 
			</div>
223 
 
224 
			<h3 class="text-secondary mt-4">Animation Speed</h3>
225 
			<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>
226 
			<div class="example">
227 
				<style>
228 
					.slow  .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
229 
					.fast  .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
230 
					.quick .toggle-group { transition: none;      -webkit-transition: none; }
231 
				</style>
232 
				<input type="checkbox" checked data-toggle="toggle" data-style="slow">
233 
				<input type="checkbox" checked data-toggle="toggle" data-style="fast">
234 
				<input type="checkbox" checked data-toggle="toggle" data-style="quick">
235 
			</div>
236 
 
237 
			<h3 class="text-secondary mt-4">Stacked checkboxes</h3>
238 
			<p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p>
239 
			<div class="example">
240 
				<div class="form-check pl-0">
241 
					<input id="stackedCheck1" class="form-check-input" type="checkbox" data-toggle="toggle" checked>
242 
					<label for="stackedCheck1" class="form-check-label">Enabled</label>
243 
				</div>
244 
				<div class="form-check pl-0">
245 
					<input id="stackedCheck2" class="form-check-input" type="checkbox" data-toggle="toggle" disabled>
246 
					<label for="stackedCheck2" class="form-check-label">Disabled</label>
247 
				</div>
248 
			</div>
249 
 
250 
			<h3 class="text-secondary mt-4">Inline Checkboxes</h3>
251 
			<p>Simply add <code>data-toggle="toggle"</code> to a convert checkboxes into toggles.</p>
252 
			<div class="example">
253 
				<div class="form-check form-check-inline">
254 
					<input id="inlineCheckbox1" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" checked>
255 
					<label for="inlineCheckbox1" class="form-check-label">Enabled</label>
256 
				</div>
257 
				<div class="form-check form-check-inline">
258 
					<input id="inlineCheckbox2" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" disabled>
259 
					<label for="inlineCheckbox2" class="form-check-label">Disabled</label>
260 
				</div>
261 
			</div>
262 
		<section>
263 
 
264 
		<section id="usage" class="container my-5 d-none d-sm-none d-md-block">
265 
			<h2>Usage</h2>
266 
			<hr>
267 
 
268 
			<h3 class="text-secondary mt-4">Initialize with HTML</h3>
269 
			<p>Simply add <code>data-toggle="toggle"</code> to convert checkboxes into toggles.</p>
270 
			<div class="example">
271 
				<input id="chkToggle1" type="checkbox" data-toggle="toggle" checked>
272 
			</div>
273 
 
274 
			<h3 class="text-secondary mt-4">Initialize with JavaScript</h3>
275 
			<p>Simply call the <code>bootstrapToggle</code> method to convert checkboxes into toggles. See <a href="#api">Options</a> for additional colors, etc.</p>
276 
			<div class="example">
277 
				<input id="chkToggle2" type="checkbox" checked>
278 
				<script>
279 
				  $(function(){ $('#chkToggle2').bootstrapToggle() });
280 
				</script>
281 
			</div>
282 
		</section>
283 
 
284 
		<section id="api" class="container my-5 d-none d-sm-none d-md-block">
285 
			<h2>API</h2>
286 
			<hr>
287 
 
288 
			<h3 class="text-secondary mt-4">Options</h3>
289 
			<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>
290 
			<div class="example">
291 
				<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">
292 
				<input type="checkbox" id="toggle-two">
293 
				<script>
294 
					$(function() {
295 
						$('#toggle-two').bootstrapToggle({
296 
							on: 'Enabled',
297 
							off: 'Disabled'
298 
						});
299 
					})
300 
				</script>
301 
			</div>
302 
			<div class="table-responsive">
303 
				<table class="table table-striped table-condensed">
304 
					<thead>
305 
						<tr>
306 
							<th>Name</th>
307 
							<th>Type</th>
308 
							<th>Default</th>
309 
							<th>Description</th>
310 
						</tr>
311 
					</thead>
312 
					<tbody>
313 
						<tr>
314 
							<td><code>on</code></td>
315 
							<td class="text-nowrap">string | html</td>
316 
							<td><code>"On"</code></td>
317 
							<td>Text of the <em>on</em> toggle label.</td>
318 
						</tr>
319 
						<tr>
320 
							<td><code>off</code></td>
321 
							<td>string | html</td>
322 
							<td><code>"Off"</code></td>
323 
							<td>Text of the <em>off</em> toggle label.</td>
324 
						</tr>
325 
						<tr>
326 
							<td><code class="text-nowrap">onstyle</code></td>
327 
							<td>string</td>
328 
							<td><code class="text-nowrap">"primary"</code></td>
329 
							<td>
330 
								Style of the <em>on</em> toggle.<br>Possible values are:
331 
								<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br>
332 
								<small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank">Button Options</a> documentation for more information.</small>
333 
							</td>
334 
						</tr>
335 
						<tr>
336 
							<td><code class="text-nowrap">offstyle</code></td>
337 
							<td>string</td>
338 
							<td><code class="text-nowrap">"light"</code></td>
339 
							<td>
340 
								Style of the <em>off</em> toggle.<br>Possible values are:
341 
								<code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, <code>dark</code><br>
342 
								<small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank">Button Options</a> documentation for more information.</small>
343 
							</td>
344 
						</tr>
345 
						<tr>
346 
							<td><code>size<code></td>
347 
							<td>string</td>
348 
							<td><em>null</em></td>
349 
							<td>
350 
								Size of the toggle. If set to <em>null</em>, button is default/normal size.<br>
351 
								Possible values are:
352 
								<code>lg</code>, <code>sm</code>, <code>xs</code><br>
353 
								<small class="text-muted">Refer to Bootstrap <a href="https://getbootstrap.com/docs/4.3/components/buttons/#sizes" target="_blank">Button Sizes</a> documentation for more information.</small>
354 
							</td>
355 
						</tr>
356 
						<tr>
357 
							<td><code>style</code></td>
358 
							<td>string</td>
359 
							<td><em>null</em></td>
360 
							<td>
361 
								Appends the provided value to the toggle's class attribute.
362 
								Use this to apply custom styles to the toggle.
363 
							</td>
364 
						</tr>
365 
						<tr>
366 
							<td><code>width</code></td>
367 
							<td>integer</td>
368 
							<td><em>null</em></td>
369 
							<td>
370 
								Sets the width of the toggle.<br>
371 
								If set to <em>null</em>, width will be calculated.
372 
							</td>
373 
						</tr>
374 
						<tr>
375 
							<td><code>height</code></td>
376 
							<td>integer</td>
377 
							<td><em>null</em></td>
378 
							<td>
379 
								Sets the height of the toggle.<br>
380 
								If set to <em>null</em>, height will be calculated.
381 
							</td>
382 
						</tr>
383 
					</tbody>
384 
				</table>
385 
			</div>
386 
 
387 
			<h3 class="text-secondary mt-4">Methods</h3>
388 
			<p>Methods can be used to control toggles directly.</p>
389 
			<div class="example">
390 
				<input id="toggle-demo" type="checkbox" data-toggle="toggle">
391 
			</div>
392 
			<div class="table-responsive">
393 
				<table class="table table-striped table-condensed">
394 
				<thead>
395 
					<tr>
396 
						<th>Method</th>
397 
						<th>Example</th>
398 
						<th>Description</th>
399 
						<th>Demo</th>
400 
					</tr>
401 
				</thead>
402 
				<tbody>
403 
					<tr>
404 
						<td><em>initialize</em></td>
405 
						<td><code>$('#toggle-demo').bootstrapToggle()</code></td>
406 
						<td>Initializes the toggle plugin with options</td>
407 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.init('#toggle-demo')">Initialize</button></td>
408 
					</tr>
409 
					<tr>
410 
						<td>destroy</td>
411 
						<td><code>$('#toggle-demo').bootstrapToggle('destroy')</code></td>
412 
						<td>Destroys the toggle</td>
413 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.destroy('#toggle-demo')">Destroy</button></td>
414 
					</tr>
415 
					<tr>
416 
						<td>on</td>
417 
						<td><code>$('#toggle-demo').bootstrapToggle('on')</code></td>
418 
						<td>Sets the toggle to 'On' state</td>
419 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.on('#toggle-demo')">On</button></td>
420 
					</tr>
421 
					<tr>
422 
						<td>off</td>
423 
						<td><code>$('#toggle-demo').bootstrapToggle('off')</code></td>
424 
						<td>Sets the toggle to 'Off' state</td>
425 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.off('#toggle-demo')">Off</button></td>
426 
					</tr>
427 
					<tr>
428 
						<td>toggle</td>
429 
						<td><code>$('#toggle-demo').bootstrapToggle('toggle')</code></td>
430 
						<td>Toggles the state of the toggle</td>
431 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.toggle('#toggle-demo')">Toggle</button></td>
432 
					</tr>
433 
					<tr>
434 
						<td>enable</td>
435 
						<td><code>$('#toggle-demo').bootstrapToggle('enable')</code></td>
436 
						<td>Enables the toggle</td>
437 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.enable('#toggle-demo')">Enable</button></td>
438 
					</tr>
439 
					<tr>
440 
						<td>disable</td>
441 
						<td><code>$('#toggle-demo').bootstrapToggle('disable')</code></td>
442 
						<td>Disables the toggle</td>
443 
						<td><button class="btn btn-outline-dark btn-sm w-100" onclick="demo.disable('#toggle-demo')">Disable</button></td>
444 
					</tr>
445 
				</tbody>
446 
				</table>
447 
			</div>
448 
 
449 
			<h3 class="text-secondary mt-4">Checked State</h3>
450 
			<p>You can determine the checked state of a toggle using the `checked` property.</p>
451 
			<div class="example">
452 
				<input id="toggle-state" type="checkbox" data-toggle="toggle">
453 
			</div>
454 
			<div id="chkState" class="example">
455 
				<button type="button" class="btn btn-outline-primary" onClick="showChkState()">Show Toggle State</button>
456 
			</div>
457 
			<p>
458 
				<div>Use the element property for checked state</div>
459 
				<code>document.getElementById('toggle-state').checked</code>
460 
				<div>Returns true/false</div>
461 
			</p>
462 
		</section>
463 
 
464 
		<section id="events" class="container my-5 d-none d-sm-none d-md-block">
465 
			<h2>Events</h2>
466 
			<hr>
467 
 
468 
			<h3 class="text-secondary mt-4">Event Propagation</h3>
469 
			<p>
470 
				<div class="label label-primary">Notes</div>
471 
				&bull;&nbsp;All events are propagated to and from input element to the toggle.<br>
472 
				&bull;&nbsp;Listen for events on the <code>&lt;input type="checkbox"></code> directly as the toggle stays synced with the input.
473 
			</p>
474 
			<div class="example">
475 
				<input id="toggle-event" type="checkbox" data-toggle="toggle">
476 
				<div id="console-event"></div>
477 
				<script>
478 
					$(function() {
479 
						$('#toggle-event').change(function() {
480 
							$('#console-event').html('Toggle: ' + $(this).prop('checked'))
481 
						})
482 
					})
483 
				</script>
484 
			</div>
485 
			<h3 class="text-secondary mt-4">Stopping Event Propagation</h3>
486 
			<p>
487 
				Passing <code>true</code> to the on/off methods will enable the silent option to prevent the control from propagating the change event in
488 
				cases where you want to update the controls on/off state, but do not want to fire the onChange event.
489 
			</p>
490 
			<div class="example">
491 
				<input id="toggle-silent" type="checkbox" data-toggle="toggle" onchange="$('#chgConsole').text(new Date().toISOString()+' ... change event fired!')">
492 
				<button class="btn btn-success" onclick="toggleApiOnSilent()" >On by API (silent)</button>
493 
				<button class="btn btn-success"  onclick="toggleApiOffSilent()">Off by API (silent)</button>
494 
				<button class="btn btn-warning" onclick="toggleApiOnNotSilent()">On by API (not silent)</button>
495 
				<button class="btn btn-warning" onclick="toggleApiOffNotSilent()">On by API (not silent)</button>
496 
				<script>
497 
					function toggleApiOnSilent() {
498 
						$('#toggle-silent').bootstrapToggle('on', true);
499 
					}
500 
					function toggleApiOffSilent() {
501 
						$('#toggle-silent').bootstrapToggle('off', true);
502 
					}
503 
					function toggleApiOnNotSilent() {
504 
						$('#toggle-silent').bootstrapToggle('on');
505 
					}
506 
					function toggleApiOffNotSilent() {
507 
						$('#toggle-silent').bootstrapToggle('off');
508 
					}
509 
				</script>
510 
				<pre class="mb-0"><code id="chgConsole" class="text-info"></code></pre>
511 
			</div>
512 
 
513 
			<h3 class="text-secondary mt-4">API vs Input</h3>
514 
			<p>This also means that using the API or Input to trigger events will work both ways.</p>
515 
			<div class="example">
516 
				<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
517 
				<button class="btn btn-success" onclick="toggleApiOn()" >On by API</button>
518 
				<button class="btn btn-danger"  onclick="toggleApiOff()">Off by API</button>
519 
				<button class="btn btn-success" onclick="toggleInpOn()" >On by Input</button>
520 
				<button class="btn btn-danger"  onclick="toggleInpOff()">Off by Input</button>
521 
				<script>
522 
					function toggleApiOn() {
523 
						$('#toggle-trigger').bootstrapToggle('on');
524 
					}
525 
					function toggleApiOff() {
526 
						$('#toggle-trigger').bootstrapToggle('off');
527 
					}
528 
					function toggleInpOn() {
529 
						$('#toggle-trigger').prop('checked', true).change();
530 
					}
531 
					function toggleInpOff() {
532 
						$('#toggle-trigger').prop('checked', false).change();
533 
					}
534 
				</script>
535 
			</div>
536 
		</section>
537 
	</main>
538 
	<footer class="bg-light border-top p-4">
539 
		<div class="container">
540 
			<h4 class="font-weight-light">
541 
				Original by <a href="https://github.com/minhur" target="_blank">Min Hur</a> |
542 
				Updated by <a href="https://github.com/gitbrent" target="_blank">Brent Ely</a> |
543 
				Available on <a href="https://github.com/gitbrent/bootstrap4-toggle" target_"blank">GitHub</a> |
544 
				Licensed <a href="https://github.com/gitbrent/bootstrap4-toggle/blob/master/LICENSE" target_"blank">MIT</a>
545 
			</h4>
546 
			<p class="mt-4 mb-0">
547 
				<iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
548 
				<iframe src="https://ghbtns.com/github-btn.html?user=gitbrent&repo=bootstrap4-toggle&type=star&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
549 
			</p>
550 
		</div>
551 
	</footer>
552 
 
553 
	<!-- vvv scripts vvv -->
554 
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
555 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
556 
	<script src="doc/script.js"></script>
557 
	<script src="js/bootstrap4-toggle.js"></script>
558 
	<!-- ^^^ scripts ^^^ -->
559 
	<script>
560 
		function showChkState() {
561 
			$('#chkState .badge').remove();
562 
			var chkBool = document.getElementById('toggle-state').checked;
563 
			$('#chkState button').after('<div class="badge badge-success px-3 py-2 mb-2 mx-3">'+chkBool+'</div>');
564 
		}
565 
	</script>
566 
	<!-- Global site tag (gtag.js) - Google Analytics -->
567 
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-75147115-4"></script>
568 
	<script>
569 
	  window.dataLayer = window.dataLayer || [];
570 
	  function gtag(){dataLayer.push(arguments);}
571 
	  gtag('js', new Date());
572 
 
573 
	  gtag('config', 'UA-75147115-4');
574 
	</script>
575 
</body>
576 
</html>