This repository has been archived by the owner on Feb 1, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
82 lines (70 loc) · 2.12 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
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToggleBox Example</title>
<style type="text/css">
body {
background-color: #fff;
margin: 40px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px 0;
padding: 5px 0 6px 0;
}
code {
font-family: Monaco, Verdana, Sans-serif;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
label {
display: block;
margin: 20px 0;
}
</style>
<link rel="stylesheet" href="jquery.togglebox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.togglebox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('input[name="standard"]').toggleBox();
$('input[name="yesno"]').toggleBox({onLabel:'Yes', offLabel:'No'});
});
</script>
</head>
<body>
<h1>ToggleBox</h1>
<p>ToggleBox is a jQuery plugin that turns checkboxes into the stylized toggle switches. ToggleBox simply hides the checkboxes it replaces, and changes their state based on the state of the switch, so forms still function as expected.</p>
<h1>Example:</h1>
<form id="example" method="post" action="/">
<label for="standard">Turn me off!</label>
<input type="checkbox" name="standard" value="" checked="checked">
<label for="yesno">Is ToggleBox neat?</label>
<input type="checkbox" name="yesno" value="" checked="checked">
</form>
<h1>Usage</h1>
<p>ToggleBox is as easy as any jQuery plugin. Here is the code that runs the example above.</p>
<pre><code>$(document).ready(function(){
$('input[name="standard"]').toggleBox();
$('input[name="yesno"]').toggleBox({onLabel:'Yes', offLabel:'No'});
});</code></pre>
</body>
</html>