testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/demos/progressbar/label.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Progressbar - Custom Label</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.progressbar.js"></script>
  11         <link rel="stylesheet" href="../demos.css">
  12         <style>
  13         .ui-progressbar {
  14                 position: relative;
  15         }
  16         .progress-label {
  17                 position: absolute;
  18                 left: 50%;
  19                 top: 4px;
  20                 font-weight: bold;
  21                 text-shadow: 1px 1px 0 #fff;
  22         }
  23         </style>
  24         <script>
  25         $(function() {
  26                 var progressbar = $( "#progressbar" ),
  27                         progressLabel = $( ".progress-label" );
  28
  29                 progressbar.progressbar({
  30                         value: false,
  31                         change: function() {
  32                                 progressLabel.text( progressbar.progressbar( "value" ) + "%" );
  33                         },
  34                         complete: function() {
  35                                 progressLabel.text( "Complete!" );
  36                         }
  37                 });
  38
  39                 function progress() {
  40                         var val = progressbar.progressbar( "value" ) || 0;
  41
  42                         progressbar.progressbar( "value", val + 1 );
  43
  44                         if ( val < 99 ) {
  45                                 setTimeout( progress, 100 );
  46                         }
  47                 }
  48
  49                 setTimeout( progress, 3000 );
  50         });
  51         </script>
  52 </head>
  53 <body>
  54
  55 <div id="progressbar"><div class="progress-label">Loading...</div></div>
  56
  57 <div class="demo-description">
  58 <p>Custom updated label demo.</p>
  59 </div>
  60 </body>
  61 </html>