-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathexample.html
80 lines (77 loc) · 2.49 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Toggle Switch - by @jamiebicknell - Github</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
<meta name='viewport' content='initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no' />
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' />
<!--[if lt IE 8]>
<link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' />
<![endif]-->
<style type='text/css'>
body {
font:bold 0.75em/16px Arial;
color:#777;
}
.wrapper {
margin:120px auto;
width:139px;
}
.wrapper .row {
clear:both;
margin:0 0 6px 0;
height:16px;
}
.wrapper .row label {
float:left;
width:100px;
}
.wrapper .row .switch {
float:left;
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='row'>
<label for='opt1'>Option 1</label>
<input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' />
</div>
<div class='row'>
<label for='opt2'>Option 2</label>
<input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' />
</div>
<div class='row'>
<label for='opt3'>Option 3</label>
<input type='checkbox' name='opt3' id='opt3' value='1' class='toggleswitch' />
</div>
<div class='row'>
<label for='opt4'>Option 4</label>
<input type='checkbox' name='opt4' id='opt4' value='1' class='toggleswitch' checked='checked' />
</div>
<div class='row'>
<label for='opt5'>Option 5</label>
<div class='switch'>
<div class='overlay'></div>
<span class='switched'></span>
<input type='checkbox' name='opt5' id='opt5' value='1' class='toggleswitch' checked='checked' />
</div>
</div>
<div class='row'>
<label for='opt6'>Option 6</label>
<div class='switch'>
<div class='overlay'></div>
<span class='switched off'></span>
<input type='checkbox' name='opt6' id='opt6' value='1' class='toggleswitch' />
</div>
</div>
</div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script type='text/javascript' src='./jquery.toggleswitch.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('.toggleswitch').toggleSwitch();
});
</script>
</body>
</html>