August 27, 2003
By Laurent Laville
The major change since version 0.4.x is that default javascript code is now embedded in core
class HTML_Progress (see getScript method).
It will avoid to forget URL of javascript companion as it was origin of malfunction in past.
But in other case, option to override default javascript code allows to customize output,
as you will see now on next examples progress3r and progress1r.
[Top]
$p->addScript('progress3.js');See HTML_Progress.getScript() method in API documentation for details.
... for (i=progress2-1; i >= 0; i--) { if (isDom) { document.getElementById('progressCell'+i+'a').style.visibility = "visible"; document.getElementById('progressCell'+i+'a').innerHTML = i; } if (isIE) { document.all['progressCell'+i+'a'].style.visibility = "visible"; document.all['progressCell'+i+'a'].innerHTML = i; } if (isNS4) { document.layers['progressCell'+i+'a'].style.visibility = "visible"; document.layers['progressCell'+i+'a'].innerHTML = i; } } ...cell 0,1,2 will have silver foreground color,
$bar->setCell(range(0,2), array('color' => 'silver'));cell 3,4,5,6 will have yellow foreground color,
$bar->setCell(range(3,6), array('color' => 'yellow'));and cell 7,8,9 will have orange foreground color
$bar->setCell(range(7,9), array('color' => 'orange'));progress3r.php
<?php /** * Display a horizontal loading bar with percent info, * filled in reverse order (right to left) * from 0 to 100% increase by step 5% * with custom configuration and javascript override. * * @version $Id: howto-part3.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 3r"); $p->setMetaData("author", "Laurent Laville"); $options = array( 'border-width' => 1, 'border-color' => 'navy', 'cell-width' => 10, 'active-color' => '#3874B4', 'inactive-color'=> '#EEEECC' ); $bar = new HTML_Progress_Bar_Horizontal('reverse', $p, $options); $bar->setText(true, array('size' => 14, 'width' => 60, 'background-color' => '#eeeeee')); $bar->setCell(range(0,2), array('color' => 'silver')); $bar->setCell(range(3,6), array('color' => 'yellow')); $bar->setCell(range(7,9), array('color' => 'orange')); $css = $bar->getStyle(); $css->setStyle('body', 'background-color', '#eeeeee'); $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 red'); $css->setStyle('div.col2', 'padding', '1em'); $css->setStyle('div.col2', 'height', '80%'); $p->addStyleDeclaration($css); $p->addScript('progress3.js'); $p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>'); $p->addBodyContent('<div class="col2">'); $p->addBodyContent('<h1>Example 3 reverse</h1>'); $p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>'); $note = <<< TEXT <p><i>Numbers in cells are made by javascript file <b>progress3.js</b></i> <br/>This example show you how to customize (see setCell API) and handle events by JavaScript.</p> TEXT; $p->addBodyContent($note); $p->addBodyContent('</div>'); $p->display(); for ($i=0; $i<20; $i++) { /* You have to do something here */ $bar->display(5); } ?>This example will produce :
[Top]
$css->setStyle('.cell1', 'background-image', 'url("download.gif")'); $css->setStyle('.cell1', 'background-repeat', 'no-repeat');no need to override the default javaScript.
<?php /** * Display a horizontal loading bar with background image, * filled in reverse order (right to left) * from 0 to 100% increase by step of 10% * with default colors, and javascript override. * * @version $Id: howto-part3.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 1r"); $p->setMetaData("author", "Laurent Laville"); $options = array( 'background-color' => '#EBEBEB', 'border-width' => 1, 'border-style' => 'inset', 'border-color' => 'white', 'cell-width' => 25, 'cell-spacing' => 0, 'active-color' => '#000084', 'inactive-color' => '#3A6EA5' ); $bar = new HTML_Progress_Bar_Horizontal('reverse', $p, $options); $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 red'); $css->setStyle('div.col2', 'padding', '1em'); $css->setStyle('div.col2', 'height', '80%'); $css->setStyle('.cell1', 'background-image', 'url("download.gif")'); $css->setStyle('.cell1', 'background-repeat', 'no-repeat'); $p->addStyleDeclaration($css); $p->addScriptDeclaration( $bar->getScript() ); $p->addBodyContent('<div class="col1">'.$bar->toHTML().'</div>'); $p->addBodyContent('<div class="col2">'); $p->addBodyContent('<h1>Example 1 reverse</h1>'); $p->addBodyContent('<p><i><b>Laurent Laville, August 2003</b></i></p>'); $note = <<< TEXT <p><i>Image <img src="download.gif"/> in cells are made by background-image property of CSS cell1 class</i> <br/>This example show you how to customize a progress bar by stylesheet properties.</p> TEXT; $p->addBodyContent($note); $p->addBodyContent('</div>'); $p->display(); for ($i=0; $i<10; $i++) { $bar->display(10); } ?>This example will produce :
[Top]