← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/tests/visual/progressbar.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/tests/visual/progressbar.html
1
 
<?xml version="1.0" encoding="UTF-8"?>
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4
 
<head>
5
 
<meta http-equiv="Content-Language" content="en" />
6
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
 
<title>ProgressBar Test Page</title>
8
 
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
9
 
<script type="text/javascript" src="../../ui/ui.core.js"></script>
10
 
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
11
 
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
12
 
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
13
 
 
14
 
<style type="text/css" media="all">
15
 
 
16
 
body
17
 
{
18
 
        background: #fff;
19
 
        font-family: Arial;
20
 
}
21
 
 
22
 
#log {
23
 
        right:0px;
24
 
        top:0px;
25
 
        background-color:#FAFCFE;
26
 
        border:1px solid #DFE8F6;
27
 
        height:400px;
28
 
        width:300px;
29
 
        position:absolute;
30
 
        overflow:auto;
31
 
}
32
 
 
33
 
/* ProgressBar */
34
 
 
35
 
.ui-progressbar {
36
 
        width: 400px; height: 20px;
37
 
        border: 1px #ccc solid;
38
 
        background:#E0E8F3 url(../images/bg.gif) repeat-x scroll 0%;
39
 
        position:relative;
40
 
}
41
 
 
42
 
.ui-progressbar-wrap {
43
 
        position: relative;
44
 
        height: auto;
45
 
        width: auto;
46
 
        line-height: 18px;
47
 
        _line-height: 16px;
48
 
}
49
 
 
50
 
.ui-progressbar-bar {
51
 
        background:#9CBFEE url(../images/progress-bg.gif) repeat-x scroll left center;
52
 
        border-bottom:1px solid #7FA9E4;
53
 
        border-right:1px solid #7FA9E4;
54
 
        border-top:1px solid #D1E4FD;
55
 
        position: absolute;
56
 
}
57
 
 
58
 
.ui-progressbar-text {
59
 
        color:#fff;
60
 
        overflow: hidden;
61
 
        white-space: nowrap;
62
 
        font-size: 11px;
63
 
        font-weight: bold;
64
 
        padding-left: 5px;
65
 
}
66
 
 
67
 
.ui-progressbar-text-back {
68
 
        color:#000;
69
 
        padding-top: 1px;
70
 
        padding-bottom: 1px;
71
 
        padding-right: 1px;
72
 
}
73
 
 
74
 
.ui-progressbar-disabled {
75
 
        opacity:.5;
76
 
        filter:Alpha(Opacity=50);
77
 
}
78
 
 
79
 
 
80
 
/* custom */
81
 
.ui-progressbar-text.right-align {
82
 
        text-align: right;
83
 
        padding: 0 5px 0 0;
84
 
}
85
 
.ui-progressbar-inner-custom {
86
 
        background: url(../images/custom-bar.gif) repeat-x scroll left center;
87
 
        border-bottom:1px solid #EFEFEF;
88
 
        border-right:0pt none;
89
 
        border-top:1px solid #BEBEBE;
90
 
        height:15px;
91
 
}
92
 
.bold {
93
 
        color: red !important;
94
 
}
95
 
.ui-hidden {
96
 
        left:-10000px;
97
 
        position:absolute;
98
 
        top:-10000px;
99
 
        visibility:hidden;
100
 
}
101
 
 
102
 
</style>
103
 
</head>
104
 
<body >
105
 
 
106
 
<h1>jQuery - ProgressBar</h1>
107
 
 
108
 
<div id="log">log</div>
109
 
 
110
 
 
111
 
<div id='p1'></div><br>
112
 
 
113
 
<button id="p1-create">Create</button>
114
 
<button id="p1-destroy" onclick="$('#p1').progressbar('destroy');">destroy</button>
115
 
<button id="p1-start" onclick="$('#p1').progressbar('start');">Start</button>
116
 
<button id="p1-stop" onclick="$('#p1').progressbar('stop');">Stop</button>
117
 
<button id="p1-stop" onclick="$('#p1').progressbar('pause');">pause</button>
118
 
<button id="p1-enable" onclick="$('#p1').progressbar('enable');">enable</button>
119
 
<button id="p1-disable" onclick="$('#p1').progressbar('disable');">disable</button>
120
 
<button id="p1-progress" onclick="$('#p1').progressbar('progress', 50);">progress to 50</button>
121
 
<button id="p1-progress" onclick="$('#p1').progressbar('text', 'Textchanged!');">Change text</button>
122
 
 
123
 
<br><br>
124
 
 
125
 
<div id='p2'></div><br>
126
 
 
127
 
<button id="p2-create">Create</button>
128
 
<button id="p2-destroy" onclick="$('#p2').progressbar('destroy');">destroy</button>
129
 
<button id="p2-start" onclick="$('#p2').progressbar('start');">Start</button>
130
 
<button id="p2-stop" onclick="$('#p2').progressbar('stop');">Stop</button>
131
 
<button id="p2-stop" onclick="$('#p2').progressbar('pause');">pause</button>
132
 
<button id="p2-enable" onclick="$('#p2').progressbar('enable');">enable</button>
133
 
<button id="p2-disable" onclick="$('#p2').progressbar('disable');">disable</button>
134
 
<button id="p2-progress" onclick="$('#p2').progressbar('progress', 40);">progress to 50</button>
135
 
 
136
 
<br><br>
137
 
 
138
 
<div id='p3'></div><br>
139
 
 
140
 
<button id="p3-create">Create</button>
141
 
<button id="p3-destroy" onclick="$('#p3').progressbar('destroy');">destroy</button>
142
 
<button id="p3-start" onclick="$('#p3').progressbar('start');">Start</button>
143
 
<button id="p3-stop" onclick="$('#p3').progressbar('stop');">Stop</button>
144
 
<button id="p3-stop" onclick="$('#p3').progressbar('pause');">pause</button>
145
 
<button id="p3-enable" onclick="$('#p3').progressbar('enable');">enable</button>
146
 
<button id="p3-disable" onclick="$('#p3').progressbar('disable');">disable</button>
147
 
<button id="p3-progress" onclick="$('#p3').progressbar('progress', $('#p3-value').val());">progress to</button>
148
 
<input type="text" id="p3-value" value="35"/>
149
 
 
150
 
<br><br>
151
 
 
152
 
<button id="p2-startall" onclick="$('#p2, #p1, #p3').progressbar('start');">Start All</button>
153
 
<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('stop');">Stop All</button>
154
 
<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('pause');">Pause All</button>
155
 
 
156
 
<script>
157
 
 
158
 
$(function() {
159
 
 
160
 
        $('#p1-create').click(function() {
161
 
 
162
 
                $('#p1').progressbar({
163
 
 
164
 
                        text: 'jQuery ProgressBar waiting...',
165
 
 
166
 
                        //addClass: 'ui-progressbar-inner-custom teste',
167
 
 
168
 
                        //textClass: 'right-align',
169
 
 
170
 
                        //align: 'right',
171
 
 
172
 
                        width: 500,
173
 
 
174
 
                        duration: 5000,
175
 
 
176
 
                        interval: 500,
177
 
 
178
 
                increment: 300,
179
 
 
180
 
                        progress: function(ui) {
181
 
                                //console.log(ui.pixelRange);
182
 
                                //console.log(ui);
183
 
                                //ui.instance.text('Waiting...');
184
 
                        },
185
 
 
186
 
                        stop: function(ui) {
187
 
                                //console.log('user stop', ui);
188
 
                        },
189
 
 
190
 
                        start: function(ui) {
191
 
                                //console.log('user start', ui);
192
 
                                console.log('p1', ui.identifier);
193
 
                        }
194
 
 
195
 
                });
196
 
 
197
 
        }).trigger("click");
198
 
 
199
 
 
200
 
        $('#p2-create').click(function() {
201
 
 
202
 
                $('#p2').progressbar({
203
 
 
204
 
                        text: 'Testing...',
205
 
 
206
 
                        //addClass: 'ui-progressbar-inner-custom teste',
207
 
 
208
 
                        //textClass: 'right-align',
209
 
 
210
 
                        //align: 'right',
211
 
 
212
 
                        width: 500,
213
 
 
214
 
                        duration: 5000,
215
 
 
216
 
                        interval: 2000,
217
 
 
218
 
                increment: 50,
219
 
 
220
 
                        progress: function(ui) {
221
 
                                //console.log(ui.pixelRange);
222
 
                                //console.log(ui);
223
 
                                //ui.instance.text('Waiting...');
224
 
                        },
225
 
 
226
 
                        stop: function(ui) {
227
 
                                //console.log('user stop', ui);
228
 
                        },
229
 
 
230
 
                        start: function(ui) {
231
 
                                //console.log('user start', ui);
232
 
                                console.log('p2', ui.identifier);
233
 
                        }
234
 
 
235
 
                });
236
 
 
237
 
        }).trigger("click");
238
 
 
239
 
 
240
 
        $('#p3-create').click(function() {
241
 
 
242
 
                $('#p3').progressbar({
243
 
 
244
 
                        //text: 'Testing again...',
245
 
 
246
 
                        //addClass: 'ui-progressbar-inner-custom teste',
247
 
 
248
 
                        //textClass: 'right-align',
249
 
 
250
 
                        //align: 'right',
251
 
 
252
 
                        width: 700,
253
 
 
254
 
                        duration: 5000,
255
 
 
256
 
                        interval: 3000,
257
 
 
258
 
                increment: 10,
259
 
 
260
 
                        progress: function(ui) {
261
 
                                //console.log(ui.pixelRange);
262
 
                                //console.log(ui);
263
 
                                //ui.instance.text('Waiting...');
264
 
                        },
265
 
 
266
 
                        stop: function(ui) {
267
 
                                //console.log('user stop', ui);
268
 
                        },
269
 
 
270
 
                        start: function(ui) {
271
 
                                //console.log('user start', ui);
272
 
                                console.log('p3', ui.identifier);
273
 
                        }
274
 
 
275
 
                });
276
 
        }).trigger('click');
277
 
});
278
 
 
279
 
if(!window.console) {
280
 
 window.console = {
281
 
        log: function() {
282
 
                $('#log').append(arguments[0]+"<br>");
283
 
                $('#log').scrollTop(999999);
284
 
        }
285
 
 };
286
 
}
287
 
 
288
 
</script>
289
 
</body>
290
 
</html>