back to main table of contents
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 class constructor
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 JavaScript
See API documentation for more details.
HTML_Progress_Bar_Vertical class constructor
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 JavaScript
See 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]
back to main table of contents