-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
158 lines (142 loc) · 7.85 KB
/
index.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Thermometer Demos</title>
<style>
/* demo styles */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
/* demo containers */
.thermometer-demo {
border-top: 1px solid #c4c4c4;
margin-bottom: 1em;
padding-bottom: 0.25em;
}
/* demo markup */
pre {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 6px;
word-wrap: break-word;
}
/* default demo thermometer styles */
.thermometer-outer {
background: #c4f0ff;
border: 1px solid #c4c4c4;
border-radius: 3px;
}
.thermometer-outer-h {
height: 20px;
width: 100%;
}
.thermometer-outer-v {
height: 200px;
width: 20px;
}
.thermometer-inner {
background: #3f83f7;
}
.thermometer-inner-h {
height: 20px;
}
.thermometer-inner-v {
width: 20px;
}
</style>
</head>
<body>
<h1>jQuery Thermometer Demos</h1>
<ul id="toc"></ul>
<section>
<div class="thermometer-demo">
<h2>Basic Thermometer</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-a" data-percent="75"></div>
<p>At its simplest, the markup for a thermometer looks like this:</p>
<pre><div data-percent="75"></div></pre>
<p>The <code>data-percent</code> attribute indicates the thermometer's percent to goal, in this case 75%. While this attribute is not required, if it is not defined, the default is 0%.</p>
<p>Of course, using the plugin on this element will prove much easier if it can be identified with some meaningful selector, like:</p>
<pre><div class="thermometer" data-percent="75"></div></pre>
<p>With this className added, calling the plugin is a piece of cake:</p>
<pre>$('.thermometer').thermometer();</pre>
<p>Once <code>$.thermometer()</code> has been called, a thermometer will be inserted into the element. (Note: The thermometer will completely replace the element's existing innerHTML.)</p>
<pre><div class="thermometer" data-percent="75"><br> <div class="thermometer-outer"><br> <div class="thermometer-inner"></div><br> </div><br></div></pre>
<p>Styling the thermometer is simple:</p>
<pre>.thermometer-outer {<br> background: #c4f0ff;<br> border: 1px solid #c4c4c4;<br> border-radius: 3px;<br> height: 20px;<br> width: 100%;<br>}<br>.thermometer-inner {<br> background: #3f83f7;<br> height: 20px;<br>}</pre>
<p>As the thermometer is animated, the plugin will automatically adjust <code>.thermometer-inner</code> to set its width (for horizontal thermometers) or height (for vertical thermometers). For this reason, you should not set these properties within your CSS.</p>
</div>
</section>
<section>
<div class="thermometer-demo">
<h2>Slow Animation</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-b" data-percent="75" data-speed="slow"></div>
<p>The plugin animates thermometers using <a target="_blank" href="http://api.jquery.com/animate/"<code>jQuery.animate()</code></a>. By default, the plugin will use an animation duration of 1 second. The <code>data-speed</code> attribute can be used to adjust this. Setting the speed to "slow" will result in a duration of 1.5 seconds instead.</p>
<pre><div class="thermometer" data-percent="75" data-speed="slow"></div></pre>
</div>
<div class="thermometer-demo">
<h2>Fast Animation</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-c" data-percent="75" data-speed="fast"></div>
<p>Setting the speed to "fast" will result in an animation duration of 200 milliseconds.</p>
<pre><div class="thermometer" data-percent="75" data-speed="fast"></div></pre>
</div>
<div class="thermometer-demo">
<h2>Explicit Animation Speed</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-d" data-percent="75" data-speed="600"></div>
<p>Alternatively, the speed can be adjusted using an explicitly defined number of milliseconds.</p>
<pre><div class="thermometer" data-percent="75" data-speed="600"></div></pre>
</div>
<div class="thermometer-demo">
<h2>No Animation</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-e" data-percent="75" data-animate="false"></div>
<p>Animation can be completely disabled using the <code>data-animate</code> attribute.</p>
<pre><div class="thermometer" data-percent="75" data-animate="false"></div></pre>
</div>
</section>
<section>
<div class="thermometer-demo">
<h2>Vertical Thermometer</h2>
<div class="thermometer thermometer-noconfig" id="thermometer-f" data-percent="75" data-orientation="vertical"></div>
<p>By default, thermometers will be displayed horizontally. The <code>data-orientation</code> attribute can be used to instead render a vertical thermometer.</p>
<pre><div class="thermometer" data-percent="75" data-orientation="vertical"></div></pre>
<p>Horizontal and vertical thermometers use distinct classNames, "thermometer-outer-h" and "thermometer-inner-h" and "thermometer-outer-v" and "thermometer-inner-v" respectively.</p>
<pre><div class="thermometer" data-percent="75" data-orientation="vertical"><br> <div class="thermometer-outer thermometer-outer-v"><br> <div class="thermometer-inner thermometer-inner-v"></div><br> </div><br></div></pre>
<p>This allows for styles to be defined differently for each orientation.</p>
<pre>.thermometer-outer {<br> background: #c4f0ff;<br> border: 1px solid #c4c4c4;<br> border-radius: 3px;<br>}<br>.thermometer-outer-h {<br> height: 20px;<br> width: 100%;<br>}<br>.thermometer-outer-v {<br> height: 200px;<br> width: 20px;<br>}<br>.thermometer-inner {<br> background: #3f83f7;<br>}<br>.thermometer-inner-h {<br> height: 20px;<br>}<br>.thermometer-inner-v {<br> width: 20px;<br>}</pre>
</div>
</section>
<section>
<div class="thermometer-demo">
<h2>Configuration Options</h2>
<div class="thermometer thermometer-config" id="thermometer-g"></div>
<p>When <code>$.thermometer()</code> is called, it optionally accepts a configuration object which will override the default plugin settings.</p>
<pre>$('.thermometer').thermometer({<br> percent: 75, <br> speed: 'slow'<br>});</pre>
<p>Even if a configuration object is provided, inline <code>data-</code> attributes will always take precedence.</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.thermometer.js"></script>
<script>
(function($) {
$(function() {
$('.thermometer-demo').each(function() {
/* build table of contents for each section */
var demoName = $(this).find('h2').html(),
demoAnchor = demoName.replace(/ /g, '-').toLowerCase();
$(this).prepend('<a name="' + demoAnchor + '"></a>');
$('#toc').append('<li><a href="#' + demoAnchor + '">' + demoName + '</a></li>');
});
/* thermometers with no config */
$('.thermometer-noconfig').thermometer();
/* thermometers with config */
$('.thermometer-config').thermometer({
percent: 75,
speed: 'slow'
})
});
})(jQuery);
</script>
</body>
</html>