|
2 | 2 | <html lang="en">
|
3 | 3 | <head>
|
4 | 4 | <meta charset="utf-8">
|
5 |
| - <title>jQuery UI Progressbar - Default functionality</title> |
| 5 | + <title>jQuery UI Progressbar - Custom Label</title> |
6 | 6 | <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
7 | 7 | <script src="../../jquery-1.8.3.js"></script>
|
8 | 8 | <script src="../../ui/jquery.ui.core.js"></script>
|
9 | 9 | <script src="../../ui/jquery.ui.widget.js"></script>
|
10 | 10 | <script src="../../ui/jquery.ui.progressbar.js"></script>
|
11 | 11 | <link rel="stylesheet" href="../demos.css">
|
12 | 12 | <style>
|
13 |
| - .progress-label { |
14 |
| - float: left; |
15 |
| - margin-left: 50%; |
16 |
| - margin-top: 5px; |
17 |
| - font-weight: bold; |
18 |
| - } |
| 13 | + .progress-label { |
| 14 | + float: left; |
| 15 | + margin-left: 50%; |
| 16 | + margin-top: 5px; |
| 17 | + font-weight: bold; |
| 18 | + text-shadow: 1px 1px 0 #fff; |
| 19 | + } |
19 | 20 | </style>
|
20 | 21 | <script>
|
21 | 22 | $(function() {
|
22 |
| - $( "#progressbar" ).progressbar({ |
| 23 | + var progressbar = $( "#progressbar" ), |
| 24 | + progressLabel = $( ".progress-label" ); |
| 25 | + |
| 26 | + progressbar.progressbar({ |
23 | 27 | value: false,
|
24 |
| - change: function( event, ui ) { |
25 |
| - $( ".progress-label" ).text( $( "#progressbar" ).progressbar( "value" ) + "%" ); |
| 28 | + change: function() { |
| 29 | + progressLabel.text( progressbar.progressbar( "value" ) + "%" ); |
| 30 | + }, |
| 31 | + complete: function() { |
| 32 | + progressLabel.text( "Complete!" ); |
26 | 33 | }
|
27 | 34 | });
|
28 | 35 |
|
29 | 36 | function progress() {
|
30 |
| - var val = $( "#progressbar" ).progressbar( "value" ); |
| 37 | + var val = progressbar.progressbar( "value" ) || 0; |
31 | 38 |
|
32 |
| - if ( !val ) { |
33 |
| - val = 0; |
34 |
| - } |
35 |
| - if ( val < 100 ) { |
36 |
| - $( "#progressbar" ).progressbar( "value", val + 1 ); |
37 |
| - setTimeout( function() { |
38 |
| - progress(); |
39 |
| - }, 100); |
40 |
| - } else { |
41 |
| - $( ".progress-label" ).text( "Complete!" ); |
| 39 | + progressbar.progressbar( "value", val + 1 ); |
| 40 | + |
| 41 | + if ( val < 99 ) { |
| 42 | + setTimeout( progress, 100 ); |
42 | 43 | }
|
43 | 44 | }
|
44 | 45 |
|
|
0 commit comments