blob: c4334b65cf3b1df8f75dbcc730d2d36b76a0dab0 (
plain)
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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.3.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false,
change: function( event, ui ) {
$( ".progress-label" ).text( $( "#progressbar" ).progressbar( "value" ) + "%" );
}
});
function progress() {
var val = $( "#progressbar" ).progressbar( "value" );
if ( !val ) {
val = 0;
}
if ( val < 100 ) {
$( "#progressbar" ).progressbar( "value", val + 1 );
setTimeout( function() {
progress();
}, 100);
} else {
$( ".progress-label" ).text( "Complete!" );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
<div class="demo-description">
<p>Custom updated label demo.</p>
</div>
</body>
</html>
|
