August 27, 2003
By Laurent Laville
To give a look of ten cells, $attributes parameter of HTML_Progress_Bar_Horizontal or HTML_Progress_Bar_Vertical classes constructors should have as cell-spacing contents a number greater than 0.
Common: - cell-spacing 2px
In the otherside, when you want to have a plain bar, you've just to set cell-spacing to 0.
$bar = new HTML_Progress_Bar_Horizontal('natural', $p, array('cell-spacing' => 0));See examples progress5 and progress10.
HTML_Progress_Bar_Horizontal ([string $way = 'natural'], [mixed $self = null], [array $attributes = array()], [mixed $script = null]) string $way: (optional) Progress Bar filled from left to right or reverse. mixed $self: (optional) Progress Bar is integrated on HTML Page (current) array $attributes: (optional) Associative array of HTML tag attributes mixed $script: (optional) URL to the linked Progress JavaScriptSee API documentation for more details.
HTML_Progress_Bar_Vertical ([string $way = 'natural'], [mixed $self = null], [array $attributes = array()], [mixed $script = null]) string $way: (optional) Progress Bar filled from down to up or reverse. mixed $self: (optional) Progress Bar is integrated on HTML Page (current) array $attributes: (optional) Associative array of HTML tag attributes mixed $script: (optional) URL to the linked Progress JavaScriptSee API documentation for more details.
[Top]
<?php /** * Display a horizontal loading bar setting at different steps * in natural order with custom colors. * * @version $Id: howto-part5.html,v 1.2 2003/08/27 22:52:37 Farell Exp $ * @author Laurent Laville <pear@laurent-laville.org> * @package HTML_Progress */ require_once ('HTML/Progress/BarHorizontal.php'); $p = new HTML_Page(); $p->setTitle("PEAR::HTML_Progress - Example 5"); $p->setMetaData("author", "Laurent Laville"); $options = array( 'background-color' => '#EBEBEB', 'border-width' => 1, 'border-style' => 'inset', 'border-color' => 'white', 'cell-width' => 20, 'cell-spacing' => 0, 'active-color' => '#000084', 'inactive-color' => '#3A6EA5' ); $bar = new HTML_Progress_Bar_Horizontal('natural', $p, $options); $text = array( 'size' => 14, 'background-color' => '#c3c6c3', // same color as body background, make it transparent 'v-align' => 'top' ); $bar->setText(true, $text); $css = $bar->getStyle(); $css->setStyle('body', 'background-color', '#c3c6c3'); $css->setStyle('body', 'font-family', 'Verdana, Arial'); $css->setStyle('a:link', 'color', 'navy'); $css->setSameStyle('a:visited, a:active', 'a:link'); $css->setStyle('div.col1', 'float', 'left'); $css->setStyle('div.col1', 'width', '25%'); $css->setStyle('div.col2', 'margin-left', '30%'); $css->setStyle('div.col2', 'border', '1px solid navy'); $css->setStyle('div.col2', 'padding', '1em'); $css->setStyle('div.col2', 'height', '80%'); $p->addStyleDeclaration($css); $p->addScriptDeclaration( $bar->getScript() ); $p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>'); $p->addBodyContent('<div class="col2">'); $p->addBodyContent('<h1>Example 5</h1>'); $p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>'); $note = <<< TEXT <p><i>plain bar</i><br /> Display horizontal loading bar setting at 3 different steps (25%, 50% 75%) TEXT; $p->addBodyContent($note); $p->addBodyContent('</div>'); $p->display(); /* Progress Start */ $bar->display(0,"set"); /* You have to do something here at 25% */ sleep(1); $bar->display(25,"set"); /* You have to do something here at 50% */ sleep(1); $bar->display(50,"set"); /* You have to do something here at 75% */ sleep(1); $bar->display(75,"set"); /* Progress End */ sleep(1); $bar->display(100,"set"); ?>This example will produce :
[Top]
<?php /** * Display a vertical loading bar from 0 to 100% step 10% * filled in reverse order, with custom colors. * * @version $Id: howto-part5.html,v 1.2 2003/08/27 22:52:37 Farell Exp $ * @author Laurent Laville <pear@laurent-laville.org> * @package HTML_Progress */ require_once 'HTML/Progress/BarVertical.php'; $p = new HTML_Page(); $p->setTitle("PEAR::HTML_Progress - Example 10r"); $p->setMetaData("author", "Laurent Laville"); $options = array( 'height' => 160, 'background-color' => '#EBEBEB', 'cell-width' => 40, 'cell-spacing' => 0, 'active-color' => '#000084', 'inactive-color' => '#3A6EA5' ); $bar = new HTML_Progress_Bar_Vertical('reverse', $p, $options); $text = array( 'height' => 20, 'size' => 10, 'background-color' => '#EBEBEB', 'h-align' => 'center' ); $bar->setText(true, $text); $css = $bar->getStyle(); $css->setStyle('body', 'background-color', '#c3c6c3'); $css->setStyle('body', 'font-family', 'Verdana, Arial'); $css->setStyle('a:link', 'color', 'navy'); $css->setSameStyle('a:visited, a:active', 'a:link'); $css->setStyle('div.col1', 'float', 'left'); $css->setStyle('div.col1', 'width', '25%'); $css->setStyle('div.col2', 'margin-left', '30%'); $css->setStyle('div.col2', 'border', '1px solid navy'); $css->setStyle('div.col2', 'padding', '1em'); $css->setStyle('div.col2', 'height', '80%'); $p->addStyleDeclaration($css); $p->addScriptDeclaration( $bar->getScript() ); $p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>'); $p->addBodyContent('<div class="col2">'); $p->addBodyContent('<h1>Example 10 reverse</h1>'); $p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>'); $p->addBodyContent('</div>'); $p->display(); for ($i=0; $i<10; $i++) { /* You have to do something here */ $bar->display(10); } ?>This example will produce :
[Top]