Mixed (rel)

Overview

This example will run a progress meter with multiple labels around
(text, percent, step, crossbar, button).

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

And also but optional :

Explains step by step

The horizontal progress bar (line 14) wait 300ms (line 15) between each step of 10% (line 16).

Additional labels are:

Single text (line 19):

Property Value Default
left   5
top   5
width   0
height   0
align   left
valign   top
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color  #000000
class  progressTextLabel%s

Crossbar (lines 21,22-27):

Property Value Default
left   5
top   5
width 170 20
height   0
align center center
valign top top
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color blue #000000
class  progressCrossbarLabel%s

Step (lines 29,30-33):

Property Value Default
left   5
top   5
width   165
height   0
align   right
valign bottom top
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color blue #000000
class  progressStepLabel%s

Button (lines 35,36-40):

Property Value Default
action    
target   self
left   0
top 0 5
width 100 0
height   0
align   center
valign   bottom
background-color   
font-size  11
font-family  Verdana, Tahoma, Arial
font-weight  normal
color red #000000
class  progressButtonLabel%s
See also :

Source Code

  1. <?php
  2. /**
  3. * Basic Horizontal ProgressBar (using relative position)
  4. * with multiple labels (crossbar, button, step, text).
  5. *
  6. * @version    $Id: mixed.php,v 1.4 2006/05/24 08:45:07 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->setAnimSpeed(300);
  16. $pb->setIncrement(10);
  17.  
  18. // Adds additional labels
  19. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Fire at will');
  20.  
  21. $pb->addLabel(HTML_PROGRESS2_LABEL_CROSSBAR, 'crs1');
  22. $pb->setLabelAttributes('crs1', array(
  23.     'valign' => 'top',
  24.     'align'  => 'center',
  25.     'width'  => 170,
  26.     'color'  => 'blue'
  27. ));
  28.  
  29. $pb->addLabel(HTML_PROGRESS2_LABEL_STEP, 'stp1');
  30. $pb->setLabelAttributes('stp1', array(
  31.     'valign' => 'bottom',
  32.     'color'  => 'blue'
  33. ));
  34.  
  35. $pb->addLabel(HTML_PROGRESS2_LABEL_BUTTON, 'btn1', 'Run again');
  36. $pb->setLabelAttributes('btn1', array(
  37.     'width' => 100,
  38.     'top' => 0,
  39.     'color' => 'red'
  40. ));
  41.  
  42. ?>
  43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  44.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  45. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  46. <head>
  47. <title>Labels Progress2 example</title>
  48. <style type="text/css">
  49. <!--
  50. <?php echo $pb->getStyle(); ?>
  51.  
  52. body {
  53.     background-color: #E0E0E0;
  54.     color: #000000;
  55.     font-family: Verdana, Arial;
  56. }
  57.  -->
  58. </style>
  59. <?php echo $pb->getScript(false); ?>
  60. </head>
  61. <body>
  62.  
  63. <?php
  64. $pb->display();
  65. $pb->run();
  66. ?>
  67.  
  68. </body>
  69. </html>