|
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