WebSVN – corrade-nucleus-nucleons – Blame – Rev 20 – /script-kiddie/002_script_kiddie/script-kiddie/node

20

office

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>

</head>

<body>

<header>

<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>

</li>

</ul>

</div>

</div>

</nav>

<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>

</div>

</div>

</div>

</header>

<main>

<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.0/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;

73

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script></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">

<h2>Usage</h2>

<hr>

<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

</label>

</div>

</div>

<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

</label>

</div>

</div>

<div id="api" class="container">

<h2>API</h2>

<hr>

<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();

})

</script>

</div>

<h3>Options</h3>

			<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({

on: 'Enabled',

off: 'Disabled'

});

})

</script>

</div>

<div class="table-responsive">

151

<table class="table table-striped table-condensed">

<thead>

<tr>

<th>Name</th>

<th>Type</th>

<th>Default</th>

<th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td>on</td>

<td>string | html</td>

164

<td><code>"On"</code></td>

165

<td>Text of the <em>on</em> toggle</td>

</tr>

<tr>

<td>off</td>

<td>string | html</td>

170

<td><code>"Off"</code></td>

171

<td>Text of the <em>off</em> toggle</td>

</tr>

<tr>

<td>size</td>

<td>string</td>

<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.

</td>

</tr>

<tr>

<td>onstyle</td>

<td>string</td>

<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.

</td>

</tr>

<tr>

<td>offstyle</td>

<td>string</td>

<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.

</td>

</tr>

<tr>

<td>style</td>

<td>string</td>

<td></td>

<td>

						Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.

</td>

</tr>

<tr>

<td>width</td>

<td>integer</td>

<td><em>null</em></td>

212

<td>

213

Sets the width of the toggle. if set to <em>null</em>, width will be calculated.

</td>

</tr>

<tr>

<td>height</td>

<td>integer</td>

<td><em>null</em></td>

220

<td>

221

Sets the height of the toggle. if set to <em>null</em>, height will be calculated.

</td>

</tr>

</tbody>

</table>

</div>

<h3>Methods</h3>

<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">

<thead>

<tr>

<th>Method</th>

<th>Example</th>

<th>Description</th>

<th>Demo</th>

</tr>

</thead>

<tbody>

<tr>

<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>

</tr>

<tr>

<td>destroy</td>

<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>

</tr>

<tr>

<td>on</td>

<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>

</tr>

<tr>

<td>off</td>

<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>

</tr>

<tr>

<td>toggle</td>

<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>

</tr>

<tr>

<td>enable</td>

<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>

</tr>

<tr>

<td>disable</td>

<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>

</tr>

</tbody>

</table>

</div>

</div>

<div id="events" class="container">

<h2>Events</h2>

<hr>

<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'))

})

})

</script>

</div>

<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()

}

</script>

</div>

</div>

<div id="demos" class="container">

<h2>Demos</h2>

<hr>

<h3>Sizes</h3>

			<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">

</div>

<h3>Colors</h3>

			<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">

</div>

<div>

</main>

<footer>

<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>