examples/simple-widgets/progress-bar.html

   1 <html>\r
   2 <head>\r
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r
   4 <title>ProgressBar</title>\r
   5 \r
   6 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
   7 <!-- GC -->\r
   8         <!-- LIBS -->\r
   9         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
  10         <!-- ENDLIBS -->\r
  11 \r
  12 <script type="text/javascript" src="../../ext-all.js"></script>\r
  13 <script type="text/javascript" src="progress-bar.js"></script>\r
  14 <link rel="stylesheet" type="text/css" href="progress-bar.css" />\r
  15 \r
  16 <!-- Common Styles for the examples -->\r
  17 <link rel="stylesheet" type="text/css" href="../shared/examples.css" />\r
  18 </head>\r
  19 <body>\r
  20 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
  21 <h1>Progress Bar</h1>\r
  22 <p>The example shows how to use the ProgressBar class. The js is not minified so it is readable.\r
  23 See <a href="progress-bar.js">progress-bar.js</a>.</p>\r
  24 \r
  25 <p>\r
  26     <b>Basic Progress Bar</b><br />\r
  27     Deferred rendering, dynamic show/hide and built-in progress text:\r
  28     <button id="btn1">Show</button><br />\r
  29     <div class="status" id="p1text">Nothing to see here.</div>\r
  30     <div id="p1" style="width:300px;"></div>\r
  31 </p>\r
  32 \r
  33 <p>\r
  34     <b>Additional Options</b><br />\r
  35     Rendered on page load, left-aligned text and % width:\r
  36     <button id="btn2">Show</button><br />\r
  37     <div id="p2" style="width:50%;"></div>\r
  38 </p>\r
  39 \r
  40 <p>\r
  41     <b>Waiting Bar</b><br />\r
  42     Wait for a long operation to complete (example will stop after 5 secs):\r
  43     <button id="btn3">Show</button><br />\r
  44     <div id="p3"></div>\r
  45     <span class="status" id="p3text">Ready</span>\r
  46 </p>\r
  47 \r
  48 <p>\r
  49     <b>Custom Styles</b><br />\r
  50     Rendered like Windows XP with custom progress text element:\r
  51     <button id="btn4">Show</button><br />\r
  52     <div id="p4" style="width:300px;"></div>\r
  53     <div class="status"><b>Status:</b> <span id="p4text"></span></div>\r
  54 </p>\r
  55 \r
  56 </body>\r
  57 </html>\r