JavaDanse

Overview

This example will filled an horizontal progress bar from right to left with javascript cell customization.
It also show how to increase cell number (default is 10).

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The progress meter wait 200ms (line 16) between each step of 5% (line 17).

There are 20 cells 20x20 filled with JavaScript (lines 18-25, 35):

Property Value Default
active-color #970038 #006600
inactive-color #FFDDAA #CCCCCC
width 20 15
height   20
spacing   2
font-size 14 8
See also :

The progress bar has a thin 1 pixel border (lines 26-27):

Property Value Default
class   progressBorder%s
width 1 0
style   solid
color   #000000
See also :

And the percent text info is center aligned on bottom side of the progress bar (lines 28-34):

Property Value Default
class   progressPercentLabel%s
width 440 50
height 0 0
font-size 14 11
font-family   Verdana, Tahoma, Arial
font-weight   normal
color #FF0000 #000000
background-color    
align center right
valign bottom right
See also :

Source Code

  1. <?php
  2. /**
  3. * 20 cells Horizontal progress bar
  4. * filled from right to left with JavaScript customization.
  5. *
  6. * @version    $Id: javadanse.php,v 1.4 2006/05/24 08:47:05 farell Exp $
  7. * @author     Laurent Laville <pear@laurent-laville.org>
  8. * @package    HTML_Progress2
  9. * @subpackage Examples
  10. * @access     public
  11. */
  12. require_once 'HTML/Progress2.php';
  13.  
  14. $pb = new HTML_Progress2();
  15. $pb->setIdent('PB1');
  16. $pb->setAnimSpeed(100);
  17. $pb->setIncrement(5);
  18. $pb->setFillWay('reverse');
  19. $pb->setCellCount(20);
  20. $pb->setCellAttributes(array(
  21.     'active-color' => '#970038',
  22.     'inactive-color' => '#FFDDAA',
  23.     'width' => 20,
  24.     'font-size' => 14
  25. ));
  26. $pb->setBorderPainted(true);
  27. $pb->setBorderAttributes('width=1');
  28. $pb->setLabelAttributes('pct1', array(
  29.     'width' => 440,
  30.     'font-size' => 14,
  31.     'color' => '#FF0000',
  32.     'align' => 'center',
  33.     'valign' => 'bottom'
  34. ));
  35. $pb->setScript('progress2_number.js');
  36.  
  37. foreach (range(0,2) as $index) {
  38.     $pb->setCellAttributes('color=red', $index);
  39. }
  40. foreach (range(3,6) as $index) {
  41.     $pb->setCellAttributes('color=yellow', $index);
  42. }
  43. foreach (range(7,9) as $index) {
  44.     $pb->setCellAttributes('color=white ', $index);
  45. }
  46. ?>
  47. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  48.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  49. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  50. <head>
  51. <title>JavaDanse Progress2 example</title>
  52. <style type="text/css">
  53. <!--
  54. <?php echo $pb->getStyle(); ?>
  55.  
  56. body {
  57.     background-color: #FFFFFF;
  58. }
  59.  -->
  60. </style>
  61. <?php echo $pb->getScript(false); ?>
  62. </head>
  63. <body>
  64.  
  65. <?php
  66. $pb->display();
  67. $pb->run();
  68. ?>
  69.  
  70. </body>
  71. </html>