hnmt/sniper_nc.git

hjg

2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0

提交 \| 用户 \| 时间
58d006	1	<!DOCTYPE html>
A	2	<html lang="en" xmlns="http://www.w3.org/1999/html">
	3	<head>
	4	<meta charset="utf-8">
	5	<title>Bootstrap switch - by Mattia Larentis and Peter Stein</title>
	6	<meta name="description" content="Switches for radio buttons and checkboxes">
	7	<meta name="author" content="Mattia Larentis">
	8	<meta name="subauthor" content="Peter Stein">
	9	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
	10
	11	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
	12	<link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css" />
	13	<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" />
	14	<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" />
	15	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
	16	<link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
	17
	18	<style type="text/css">
	19	body {
	20	padding-top: 60px;
	21	padding-bottom: 40px;
	22	}
	23	.span4, h1, h4 {
	24	text-align: center;
	25	}
	26
	27	h1 {
	28	font-size: 4em;
	29	}
	30
	31	h4 {
	32	font-weight: 200;
	33	}
	34
	35	h1 {
	36	margin-bottom: 20px;
	37	}
	38
	39	h3 {
	40	margin-top: 20px;
	41	}
	42	</style>
	43
	44	<script>
	45	var _gaq = _gaq \|\| [];
	46	_gaq.push(['_setAccount', 'UA-43092768-1']);
	47	_gaq.push(['_trackPageview']);
	48
	49	(function () {
	50	var ga = document.createElement('script');
	51	ga.type = 'text/javascript';
	52	ga.async = true;
	53	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	54	var s = document.getElementsByTagName('script')[0];
	55	s.parentNode.insertBefore(ga, s);
	56	})();
	57
	58	</script>
	59
	60	</head>
	61	<body>
	62	<a href="https://github.com/nostalgiaz/bootstrap-switch">
	63	<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
	64	</a>
	65
	66	<div class="container">
	67	<div class="row-fluid">
	68	<div class="span8 offset2">
	69	<h1>Bootstrap switch</h1>
	70	<h4>
	71	by
	72	<a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/spiritualguru">@SpiritualGuru</a>)
	73	and
	74	<a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a>
	75	</h4>
	76	<br>
	77	</div>
	78	</div>
	79
	80	<div class="row-fluid">
	81	<div class="span8 offset2" style="text-align: center;">
	82	<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
	83	allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
	84	<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
	85	allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
	86	<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
	87	allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
	88	<iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&type=follow&count=true"
	89	allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
	90	</div>
	91	</div>
	92
	93	<div class="row-fluid">
	94	<h2 class="span8 offset2">
	95	<a name="size" class="anchor" href="#size">Size</a>
	96	</h2>
	97	</div>
	98
	99	<div class="row-fluid">
	100	<div class="span8 offset2">
	101	<div class="bs-docs-example">
	102	<div class="make-switch switch-large">
	103	<input type="checkbox" checked>
	104	</div>
	105
	106	<div class="make-switch">
	107	<input type="checkbox" checked>
	108	</div>
	109
	110	<div class="make-switch switch-small">
	111	<input type="checkbox" checked>
	112	</div>
	113
	114	<div class="make-switch switch-mini">
	115	<input type="checkbox" checked>
	116	</div>
	117
	118	<br>
	119	<br>
	120
	121	<span>Dimensions can be changed too:</span>
	122	<div id="dimension-switch" class="make-switch">
	123	<input type="checkbox" checked>
	124	</div>
	125
	126	<br />
	127	<br />
	128
	129	<button id="btn-size-large-switch" class="btn">Large</button>
	130	<button id="btn-size-regular-switch" class="btn">Regular</button>
	131	<button id="btn-size-small-switch" class="btn">Small</button>
	132	<button id="btn-size-mini-switch" class="btn">Mini</button>
	133	</div>
	134	<pre class="prettyprint linenums">
	135	<div class="make-switch switch-large">
	136	<input type="checkbox" checked>
	137	</div>
	138
	139	<div class="make-switch">
	140	<input type="checkbox" checked>
	141	</div>
	142
	143	<div class="make-switch switch-small">
	144	<input type="checkbox" checked>
	145	</div>
	146
	147	<div class="make-switch switch-mini">
	148	<input type="checkbox" checked>
	149	</div>
	150
	151	<div id="dimension-switch" class="make-switch">
	152	<input type="checkbox" checked>
	153	</div></pre>
	154	<pre class="prettyprint linenums">
	155	// Resets to the regular style
	156	$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
	157	// Sets a mini switch
	158	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
	159	// Sets a small switch
	160	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
	161	// Sets a large switch
	162	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');</pre>
	163	</div>
	164	</div>
	165
	166	<div class="row-fluid">
	167	<h2 class="span8 offset2">
	168	<a name="colors" class="anchor" href="#colors">Colors</a>
	169	</h2>
	170	</div>
	171
	172	<div class="row-fluid">
	173	<div class="span8 offset2">
	174	<div class="bs-docs-example">
	175	<div class="make-switch" data-on="primary" data-off="info">
	176	<input type="checkbox" checked>
	177	</div>
	178	<div class="make-switch" data-on="info" data-off="success">
	179	<input type="checkbox" checked>
	180	</div>
	181	<div class="make-switch" data-on="success" data-off="warning">
	182	<input type="checkbox" checked>
	183	</div>
	184	<div class="make-switch" data-on="warning" data-off="danger">
	185	<input type="checkbox" checked>
	186	</div>
	187	<div class="make-switch" data-on="danger" data-off="default">
	188	<input type="checkbox" checked>
	189	</div>
	190	<div class="make-switch" data-on="default" data-off="primary">
	191	<input type="checkbox" checked>
	192	</div>
	193
	194	<br />
	195	<br />
	196
	197	<span>Colors can be changed too:</span>
	198	<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
	199	<input type="checkbox" checked>
	200	</div>
	201
	202	<br />
	203	<br />
	204
	205	<button id="btn-color-on-switch" class="btn btn-success">
	206	Change "On" color
	207	</button>
	208	<button id="btn-color-off-switch" class="btn btn-danger">
	209	Change "Off" color
	210	</button>
	211	</div>
	212
	213	<pre class="prettyprint linenums">
	214	<div class="make-switch" data-on="primary" data-off="info">
	215	<input type="checkbox" checked>
	216	</div>
	217
	218	<div class="make-switch" data-on="info" data-off="success">
	219	<input type="checkbox" checked>
	220	</div>
	221
	222	<div class="make-switch" data-on="success" data-off="warning">
	223	<input type="checkbox" checked>
	224	</div>
	225
	226	<div class="make-switch" data-on="warning" data-off="danger">
	227	<input type="checkbox" checked>
	228	</div>
	229
	230	<div class="make-switch" data-on="danger" data-off="default">
	231	<input type="checkbox" checked>
	232	</div>
	233
	234	<div class="make-switch" data-on="default" data-off="primary">
	235	<input type="checkbox" checked>
	236	</div>
	237
	238	<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
	239	<input type="checkbox" checked>
	240	</div></pre>
	241
	242	<pre class="prettyprint linenums">
	243	$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
	244	$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');</pre>
	245	</div>
	246	</div>
	247
	248	<div class="row-fluid">
	249	<h2 class="span8 offset2">
	250	<a name="animation" class="anchor" href="#animation">Animation <small>javascript</small></a>
	251	</h2>
	252	</div>
	253
	254	<div class="row-fluid">
	255	<div class="span8 offset2">
	256	<div class="bs-docs-example">
	257	<div id="animated-switch" class="make-switch" data-animated="false">
	258	<input type="checkbox" checked>
	259	</div>
	260
	261	<br />
	262	<br />
	263
	264	<button id="btn-animate-switch" class="btn">Animate</button>
	265	<button id="btn-dont-animate-switch" class="btn">Don't animate</button>
	266	</div>
	267	<pre class="prettyprint linenums">
	268	<div id="animated-switch" class="make-switch" data-animated="false">
	269	<input type="checkbox" checked>
	270	</div></pre>
	271
	272	<pre class="prettyprint linenums">
	273	// Enables animation for the selected item
	274	$('#animated-switch').bootstrapSwitch('setAnimated', true);
	275	// Disables animation for the selected item
	276	$('#animated-switch').bootstrapSwitch('setAnimated', false);</pre>
	277	</div>
	278	</div>
	279
	280	<div class="row-fluid">
	281	<h2 class="span8 offset2">
	282	<a name="disabled" class="anchor" href="#disabled">Disabled</a>
	283	</h2>
	284	</div>
	285
	286	<div class="row-fluid">
	287	<div class="span8 offset2">
	288	<div class="bs-docs-example">
	289	<div class="make-switch">
	290	<input type="checkbox" checked disabled>
	291	</div>
	292	</div>
	293	<pre class="prettyprint linenums">
	294	<div class="make-switch">
	295	<input type="checkbox" checked disabled>
	296	</div></pre>
	297	</div>
	298	</div>
	299
	300	<div class="row-fluid">
	301	<h2 class="span8 offset2">
	302	<a name="text" class="anchor" href="#text">Text</a>
	303	</h2>
	304	</div>
	305
	306	<div class="row-fluid">
	307	<div class="span8 offset2">
	308	<div class="bs-docs-example">
	309	<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
	310	<input type="checkbox" checked>
	311	</div>
	312
	313	<br />
	314	<br />
	315
	316	<button id="btn-label-on-switch" class="btn">Change "On" label</button>
	317	<button id="btn-label-off-switch" class="btn">Change "Off" label</button>
	318
	319	</div>
	320	<pre class="prettyprint linenums">
	321	<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
	322	<input type="checkbox" checked>
	323	</div></pre>
	324	<pre class="prettyprint linenums">
	325	$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
	326	$('#label-switch').bootstrapSwitch('setOffLabel', 'O');</pre>
	327	</div>
	328	</div>
	329
	330	<div class="row-fluid">
	331	<h2 class="span8 offset2">
	332	<a name="label-text" class="anchor" href="#label-text">Label Text</a>
	333	</h2>
	334	</div>
	335
	336	<div class="row-fluid">
	337	<div class="span8 offset2">
	338	<div class="bs-docs-example">
	339	<div class="make-switch" data-text-label="TV">
	340	<input type="checkbox" checked>
	341	</div>
	342	</div>
	343	<pre class="prettyprint linenums">
	344	<div class="make-switch" data-text-label="TV">
	345	<input type="checkbox" checked>
	346	</div></pre>
	347	</div>
	348	</div>
	349
	350	<div class="row-fluid">
	351	<h2 class="span8 offset2">
	352	<a name="html-text" class="anchor" href="#html-text">HTML text</a>
	353	</h2>
	354	</div>
	355
	356	<div class="row-fluid">
	357	<div class="span8 offset2">
	358	<div class="bs-docs-example">
	359	<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
	360	<input type="checkbox" checked>
	361	</div>
	362	</div>
	363	<pre class="prettyprint linenums">
	364	<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
	365	<input type="checkbox" checked />
	366	</div></pre>
	367	</div>
	368	</div>
	369
	370	<div class="row-fluid">
	371	<h2 class="span8 offset2">
	372	<a name="html-text-label-icon" class="anchor" href="#html-text-label-icon">HTML text Label Icon</a>
	373	</h2>
	374	</div>
	375
	376	<div class="row-fluid">
	377	<div class="span8 offset2">
	378	<div class="bs-docs-example">
	379	<h5>Standard</h5>
	380	<div class="make-switch 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>">
	381	<input type="checkbox" checked>
	382	</div>
	383
	384	<h5>Font Awesome</h5>
	385	<div class="make-switch 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>">
	386	<input type="checkbox" checked>
	387	</div>
	388
	389	<h5>Flat UI</h5>
	390	<div class="make-switch switch-large" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
	391	<input type="checkbox" checked>
	392	</div>
	393	</div>
	394
	395	<!--<h3>Standard</h3>-->
	396	<pre class="prettyprint linenums">
	397	<div class="make-switch 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>">
	398	<input type="checkbox" checked>
	399	</div>
	400
	401	<div class="make-switch 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>">
	402	<input type="checkbox" checked>
	403	</div>
	404
	405	<div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
	406	<input type="checkbox" checked>
	407	</div></pre>
	408	</div>
	409	</div>
	410
	411	<div class="row-fluid">
	412	<h2 class="span8 offset2">
	413	<a name="event-handler-javascript" class="anchor" href="#event-handler-javascript">Event handler <small>javascript</small></a>
	414	</h2>
	415	</div>
	416
	417	<div class="row-fluid">
	418	<div class="span8 offset2">
	419	<div class="bs-docs-example">
	420	<div id="mySwitch" class="make-switch">
	421	<input type="checkbox" checked>
	422	</div>
	423	</div>
	424	<pre class="prettyprint linenums">
	425	$('#mySwitch').on('switch-change', function (e, data) {
	426	var $el = $(data.el)
	427	, value = data.value;
	428	console.log(e, $el, value);
	429	});</pre>
	430	</div>
	431	</div>
	432
	433	<div class="row-fluid">
	434	<h2 class="span8 offset2">
	435	<a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript">Label Event handler <small>javascript</small></a>
	436	</h2>
	437	</div>
	438
	439	<div class="row-fluid">
	440	<div class="span8 offset2">
	441	<div class="bs-docs-example">
	442	<h5>Label 1</h5>
	443	<label id="label-toggle-switch">Click on this Text to change the switch state</label>
	444	<div class="label-toggle-switch make-switch">
	445	<input type="checkbox" checked>
	446	</div>
	447
	448	<h5>Label 2</h5>
	449	<div id="label2-toggle-switch">
	450	<label class="label-change-switch">Click on this Text to change the switch state
	451	<div class="label2-toggle-switch make-switch">
	452	<input type="checkbox" checked>
	453	</div>
	454	</label>
	455	</div>
	456	</div>
	457
	458	<pre class="prettyprint linenums">
	459	<label id="label-toggle-switch">Click on this Text to change the switch state</label>
	460	<div class="label-toggle-switch make-switch">
	461	<input type="checkbox" checked />
	462	</div>
	463	<script>
	464	$('#label-toggle-switch').on('click', function(e, data) {
	465	$('.label-toggle-switch').bootstrapSwitch('toggleState');
	466	});
	467	$('.label-toggle-switch').on('switch-change', function (e, data) {
	468	alert(data.value);
	469	});
	470	</script>
	471
	472	<div id="label2-toggle-switch">
	473	<label class="label-change-switch">Click on this Text to change the switch state
	474	<div class="label2-toggle-switch make-switch">
	475	<input type="checkbox" checked />
	476	</div>
	477	</label>
	478	</div>
	479	<script>
	480	$('#label2-toggle-switch').on('switch-change', function(e, data) {
	481	alert(data.value);
	482	});
	483	</script></pre>
	484	</div>
	485	</div>
	486
	487	<div class="row-fluid">
	488	<h2 class="span8 offset2">
	489	<a name="toggle-state" class="anchor" href="#toggle-state">Toggle State <small>javascript</small></a>
	490	</h2>
	491	</div>
	492
	493	<div class="row-fluid">
	494	<div class="span8 offset2">
	495	<div class="bs-docs-example">
	496	<div id="toggle-state-switch" class="make-switch">
	497	<input type="checkbox" checked>
	498	</div>
	499
	500	<br />
	501	<br />
	502
	503	<div id="toggle-state-switch-button-status" class="btny">Status!</div>
	504	<div id="toggle-state-switch-button-on" class="btn">ON!</div>
	505	<div id="toggle-state-switch-button" class="btn">Toggle me!</div>
	506	<div id="toggle-state-switch-button-off" class="btn">OFF!</div>
	507	</div>
	508	<pre class="prettyprint linenums">
	509	$('#toggle-state-switch').bootstrapSwitch('status'); // true \|\| false
	510	$('#toggle-state-switch').bootstrapSwitch('toggleState');
	511	$('#toggle-state-switch').bootstrapSwitch('setState', false); // true \|\| false</pre>
	512	</div>
	513	</div>
	514
	515	<div class="row-fluid">
	516	<h2 class="span8 offset2">
	517	<a name="destroy" class="anchor" href="#destroy">Destroy <small>javascript</small></a>
	518	</h2>
	519	</div>
	520
	521	<div class="row-fluid">
	522	<div class="span8 offset2">
	523	<div class="bs-docs-example">
	524	<div id="destroy-switch" class="make-switch">
	525	<input type="checkbox" checked>
	526	</div>
	527
	528	<br />
	529	<br />
	530
	531	<button id="btn-destroy-switch" class="btn">Destroy me!</button>
	532	</div>
	533	<pre class="prettyprint linenums">
	534	$('#destroy-switch').bootstrapSwitch('destroy');</pre>
	535	</div>
	536	</div>
	537
	538	<div class="row-fluid">
	539	<h2 class="span8 offset2">
	540	<a name="create" class="anchor" href="#create">Create <small>javascript</small></a>
	541	</h2>
	542	</div>
	543
	544	<div class="row-fluid">
	545	<div class="span8 offset2">
	546	<div class="bs-docs-example">
	547	<input id="create-switch" type="checkbox" checked>
	548
	549	<br />
	550	<br />
	551
	552	<div id="btn-create" class="btn">Create</div>
	553	</div>
	554	<pre class="prettyprint linenums">
	555	$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();</pre>
	556	</div>
	557	</div>
	558
	559	<div class="row-fluid">
	560	<h2 class="span8 offset2">
	561	<a name="disabled-javascript" class="anchor" href="#disabled-javascript">Disabled <small>javascript</small></a>
	562	</h2>
	563	</div>
	564
	565	<div class="row-fluid">
	566	<div class="span8 offset2">
	567	<div class="bs-docs-example">
	568	<label for="disable-switch-input">amazing label</label>
	569	<div id="disable-switch" class="make-switch">
	570	<input id="disable-switch-input" type="checkbox" checked>
	571	</div>
	572
	573	<br />
	574	<br />
	575
	576	<button id="btn-is-active-switch" class="btn">Is active?</button>
	577	<button id="btn-toggle-activation-switch" class="btn">Toggle activation!</button>
	578	<button id="btn-disable-switch" class="btn">Disable!</button>
	579	<button id="btn-activate-switch" class="btn">Activate!</button>
	580	</div>
	581	<pre class="prettyprint linenums">
	582	$('#disable-switch').bootstrapSwitch('isActive');
	583	$('#disable-switch').bootstrapSwitch('toggleActivation');
	584	$('#disable-switch').bootstrapSwitch('setActive', false); // true \|\| false</pre>
	585	</div>
	586	</div>
	587
	588	<div class="row-fluid">
	589	<h2 class="span8 offset2">
	590	<a name="radio-javascript" class="anchor" href="#radio-javascript">Radio <small>javascript</small></a>
	591	</h2>
	592	</div>
	593
	594	<div class="row-fluid">
	595	<div class="span8 offset2">
	596	<div class="bs-docs-example">
	597	<div class="control-group">
	598	<div class="controls">
	599	<label for="option1">Option 1</label>
	600	<div class="make-switch radio1 radio-no-uncheck">
	601	<input id="option1" type="radio" name="radio1" value="option1">
	602	</div>
	603	<label for="option2">Option 2</label>
	604	<div class="make-switch radio1 radio-no-uncheck">
	605	<input id="option2" type="radio" name="radio1" value="option2">
	606	</div>
	607	<label for="option3">Option 3</label>
	608	<div class="make-switch radio1 radio-no-uncheck">
	609	<input id="option3" type="radio" name="radio1" value="option3">
	610	</div>
	611	</div>
	612	</div>
	613	</div>
	614	<pre class="prettyprint linenums">
	615	<div class="control-group">
	616	<div class="controls">
	617	<label for="option1">Option 1</label>
	618	<div class="make-switch radio1 radio-no-uncheck">
	619	<input id="option1" type="radio" name="radio1" value="option1">
	620	</div>
	621	<label for="option2">Option 2</label>
	622	<div class="make-switch radio1 radio-no-uncheck">
	623	<input id="option2" type="radio" name="radio1" value="option2">
	624	</div>
	625	<label for="option3">Option 3</label>
	626	<div class="make-switch radio1 radio-no-uncheck">
	627	<input id="option3" type="radio" name="radio1" value="option3">
	628	</div>
	629	</div>
	630	</div>
	631	<script>
	632	$('.radio1').on('switch-change', function () {
	633	$('.radio1').bootstrapSwitch('toggleRadioState');
	634	});
	635	// or
	636	$('.radio1').on('switch-change', function () {
	637	$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
	638	});
	639	// or
	640	$('.radio1').on('switch-change', function () {
	641	$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
	642	});
	643	</script></pre>
	644	</div>
	645	</div>
	646
	647	<div class="row-fluid">
	648	<h2 class="span8 offset2">
	649	<a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck">Radio <small>javascript (allow radios uncheck)</small></a>
	650	</h2>
	651	</div>
	652
	653	<div class="row-fluid">
	654	<div class="span8 offset2">
	655	<div class="bs-docs-example">
	656	<div class="control-group">
	657	<div class="controls">
	658	<label for="option11">Option 1</label>
	659	<div class="make-switch radio2">
	660	<input id="option11" type="radio" name="radio2" value="option11">
	661	</div>
	662	<label for="option12">Option 2</label>
	663	<div class="make-switch radio2">
	664	<input id="option12" type="radio" name="radio2" value="option12" checked="checked">
	665	</div>
	666	<label for="option13">Option 3</label>
	667	<div class="make-switch radio2">
	668	<input id="option13" type="radio" name="radio2" value="option13">
	669	</div>
	670	</div>
	671	</div>
	672	</div>
	673	<pre class="prettyprint linenums">
	674	<div class="control-group">
	675	<div class="controls">
	676	<label for="option11">Option 1</label>
	677	<div class="make-switch radio2">
	678	<input id="option11" type="radio" name="radio2" value="option1">
	679	</div>
	680	<label for="option12">Option 2</label>
	681	<div class="make-switch radio2">
	682	<input id="option12" type="radio" name="radio2" value="option2" checked="checked">
	683	</div>
	684	<label for="option13">Option 3</label>
	685	<div class="make-switch radio2">
	686	<input id="option13" type="radio" name="radio2" value="option3">
	687	</div>
	688	</div>
	689	</div>
	690	<script>
	691	$('.radio2').on('switch-change', function () {
	692	$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
	693	});
	694	</script></pre>
	695	</div>
	696	</div>
	697
	698	<div class="row-fluid">
	699	<h2 class="span8 offset2">
	700	<a name="form" class="anchor" href="#form">Form <small>- try to use tab, space and reset button</small></a>
	701	</h2>
	702	</div>
	703
	704	<div class="row-fluid">
	705	<div class="span8 offset2">
	706	<div class="bs-docs-example">
	707	<form class="form-horizontal span8 offset2">
	708	<div class="control-group">
	709	<label class="control-label" for="inputEmail">Email</label>
	710	<div class="controls">
	711	<input type="text" id="inputEmail" placeholder="Email">
	712	</div>
	713	</div>
	714
	715	<div class="control-group">
	716	<label class="control-label" for="notification1">Notification 1</label>
	717
	718	<div class="controls">
	719	<div class="make-switch" tabindex="0">
	720	<input id="notification1" type="checkbox">
	721	</div>
	722	</div>
	723	</div>
	724	<div class="control-group">
	725	<label class="control-label" for="notification2">Notification 2</label>
	726
	727	<div class="controls">
	728	<div class="make-switch" tabindex="0">
	729	<input id="notification2" type="checkbox">
	730	</div>
	731	</div>
	732	</div>
	733
	734	<div class="form-actions">
	735	<button type="reset" class="btn btn-inverse">Reset</button>
	736	</div>
	737	</form>
	738	<div class="clearfix"></div>
	739	</div>
	740
	741	<pre class="prettyprint linenums">
	742	<form class="form-horizontal">
	743	<div class="control-group">
	744	<label class="control-label" for="inputEmail">Email</label>
	745	<div class="controls">
	746	<input type="text" id="inputEmail" placeholder="Email">
	747	</div>
	748	</div>
	749	<div class="control-group">
	750	<label class="control-label" for="notification1">Notification 1</label>
	751	<div class="controls">
	752	<div class="make-switch" tabindex="0">
	753	<input id="notification1" type="checkbox">
	754	</div>
	755	</div>
	756	</div>
	757	<div class="control-group">
	758	<label class="control-label" for="notification2">Notification 2</label>
	759	<div class="controls">
	760	<div class="make-switch" tabindex="0">
	761	<input id="notification2" type="checkbox">
	762	</div>
	763	</div>
	764	</div>
	765	<div class="form-actions">
	766	<button type="reset" class="btn btn-inverse">Reset</button>
	767	</div>
	768	</form></pre>
	769	</div>
	770	</div>
	771
	772	<div class="row-fluid">
	773	<h2 class="span8 offset2">
	774	<a name="modal" class="anchor" href="#modal">Modal</a>
	775	</h2>
	776	</div>
	777	<!-- MODAL -->
	778	<div class="row-fluid">
	779	<div class="span8 offset2">
	780	<div class="bs-docs-example">
	781	<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
	782	</div>
	783	<pre class="prettyprint linenums">
	784	<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
	785
	786	<div class="modal-body">
	787	<div class="make-switch">
	788	<input type="checkbox" checked>
	789	</div>
	790	</div></pre>
	791	</div>
	792	</div>
	793	</div>
	794
	795	<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	796	<div class="modal-header">
	797	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	798	<h3>Modal</h3>
	799	</div>
	800	<div class="modal-body">
	801	<div class="make-switch">
	802	<input type="checkbox" checked>
	803	</div>
	804	</div>
	805	<div class="modal-footer">
	806	<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	807	</div>
	808	</div>
	809
	810	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	811
	812	<script>
	813	$(document).ready(function() {
	814	window.prettyPrint && prettyPrint();
	815	$('#mySwitch').on('switch-change', function (e, data) {
	816	var $el = $(data.el)
	817	, value = data.value;
	818	console.log(e, $el, value);
	819	});
	820
	821	// DIMENSION
	822	$('#btn-size-regular-switch').on('click', function () {
	823	$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
	824	});
	825	$('#btn-size-mini-switch').on('click', function () {
	826	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
	827	});
	828	$('#btn-size-small-switch').on('click', function () {
	829	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
	830	});
	831	$('#btn-size-large-switch').on('click', function () {
	832	$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
	833	});
	834
	835	// STATE
	836	$('#toggle-state-switch-button').on('click', function () {
	837	$('#toggle-state-switch').bootstrapSwitch('toggleState');
	838	});
	839	$('#toggle-state-switch-button-on').on('click', function () {
	840	$('#toggle-state-switch').bootstrapSwitch('setState', true);
	841	});
	842	$('#toggle-state-switch-button-off').on('click', function () {
	843	$('#toggle-state-switch').bootstrapSwitch('setState', false);
	844	});
	845	$('#toggle-state-switch-button-status').on('click', function () {
	846	alert($('#toggle-state-switch').bootstrapSwitch('status'));
	847	});
	848
	849	// DESTROY
	850	$('#btn-destroy-switch').on('click', function () {
	851	$('#destroy-switch').bootstrapSwitch('destroy');
	852	$(this).remove();
	853	});
	854	// CREATE
	855	$('#btn-create').on('click', function () {
	856	$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
	857	$(this).remove()
	858	});
	859
	860	// ACTIVATION
	861	$('#btn-is-active-switch').on('click', function () {
	862	alert($('#disable-switch').bootstrapSwitch('isActive'));
	863	});
	864	$('#btn-toggle-activation-switch').on('click', function () {
	865	$('#disable-switch').bootstrapSwitch('toggleActivation');
	866	});
	867	$('#btn-disable-switch').on('click', function () {
	868	$('#disable-switch').bootstrapSwitch('setActive', false);
	869	});
	870	$('#btn-activate-switch').on('click', function () {
	871	$('#disable-switch').bootstrapSwitch('setActive', true);
	872	});
	873
	874	// LABEL
	875	$('#btn-label-on-switch').on('click', function() {
	876	$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
	877	});
	878	$('#btn-label-off-switch').on('click', function() {
	879	$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
	880	});
	881
	882	$('#label-toggle-switch').on('click', function(e, data) {
	883	$('.label-toggle-switch').bootstrapSwitch('toggleState');
	884	});
	885	$('.label-toggle-switch').on('switch-change', function(e, data) {
	886	alert(data.value);
	887	});
	888	$('#label2-toggle-switch').on('switch-change', function(e, data) {
	889	alert(data.value);
	890	});
	891
	892	// COLOR
	893	$('#btn-color-on-switch').on('click', function() {
	894	$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
	895	});
	896	$('#btn-color-off-switch').on('click', function() {
	897	$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
	898	});
	899
	900	// ANIMATION
	901	$('#btn-animate-switch').on('click', function() {
	902	$('#animated-switch').bootstrapSwitch('setAnimated', true);
	903	});
	904	$('#btn-dont-animate-switch').on('click', function() {
	905	$('#animated-switch').bootstrapSwitch('setAnimated', false);
	906	});
	907
	908	// RADIO
	909	$('.radio1').on('switch-change', function () {
	910	$('.radio1').bootstrapSwitch('toggleRadioState');
	911	});
	912	$('.radio2').on('switch-change', function () {
	913	$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
	914	});
	915	});
	916	</script>
	917
	918	<footer>
	919	<div class="container-fluid">
	920	<p style="float:left; padding-top: 5px;">
	921	© by
	922	<a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>)
	923	and
	924	<a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a>
	925	</p>
	926	</div>
	927	</footer>
	928
	929	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	930	<script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
	931	<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	932	<script src="../static/js/bootstrap-switch.js"></script>
	933	</body>
	934	</html>