$Date: 2004/04/18 13:25:43 $
This example will run a natural horizontal ProgressBar with blue skin. It will also show you how to print something inside cells with an external javascript (replaced internal code).
Percent text info is centered on a 60 pixels width area, on right side of the progress bar.
[Top]
Build the progress bar
require_once 'HTML/Progress.php'; $bar = new HTML_Progress(); $bar->setAnimSpeed(100); $bar->setIncrement(10); $bar->setBorderPainted(true); $ui =& $bar->getUI(); $ui->setCellAttributes('active-color=#3874B4 inactive-color=#EEEECC width=10'); $ui->setBorderAttributes('width=1 color=navy'); $ui->setStringAttributes('width=60 font-size=14 background-color=#EEEEEE align=center'); $ui->setScript('progress_number.js'); foreach (range(0,2) as $index) { $ui->setCellAttributes('color=silver', $index); } foreach (range(3,6) as $index) { $ui->setCellAttributes('color=yellow', $index); } foreach (range(7,9) as $index) { $ui->setCellAttributes('color=orange', $index); }
Loop to run the progress
do { $bar->display(); if ($bar->getPercentComplete() == 1) { break; // the progress bar has reached 100% } // your user-process should be put HERE ! $bar->incValue(); } while(1);
[Top]
active-color = #3874B4 inactive-color = #EEEECC width = 10
width = 1 color = navy
width = 60 font-size = 14 background-color = #EEEEEE align = center
var isDom = document.getElementById?true:false; var isIE = document.all?true:false; var isNS4 = document.layers?true:false; var cellCount = 10; function setprogress(pIdent, pValue, pString, pDeterminate) { if (isDom) prog = document.getElementById(pIdent+'installationProgress'); if (isIE) prog = document.all[pIdent+'installationProgress']; if (isNS4) prog = document.layers[pIdent+'installationProgress']; if (prog != null) prog.innerHTML = pString; if (pValue == pDeterminate) { for (i=0; i < cellCount; i++) { showCell(i, pIdent, "hidden"); } } if ((pDeterminate > 0) && (pValue > 0)) { i = (pValue-1) % cellCount; showCell(i, pIdent, "visible"); } else { for (i=pValue-1; i >=0; i--) { showCell(i, pIdent, "visible"); if (isDom) document.getElementById(pIdent+'progressCell'+i+'A').innerHTML = i; if (isIE) document.all[pIdent+'progressCell'+i+'A'].innerHTML = i; if (isNS4) document.layers[pIdent+'progressCell'+i+'A'].innerHTML = i; } } } function showCell(pCell, pIdent, pVisibility) { if (isDom) document.getElementById(pIdent+'progressCell'+pCell+'A').style.visibility = pVisibility; if (isIE) document.all[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility; if (isNS4) document.layers[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility; }
[Top]
[Top]
Run the script below :
<?php require_once 'HTML/Progress.php'; $bar = new HTML_Progress(); $bar->setAnimSpeed(100); $bar->setIncrement(10); $bar->setBorderPainted(true); $ui =& $bar->getUI(); $ui->setCellAttributes('active-color=#3874B4 inactive-color=#EEEECC width=10'); $ui->setBorderAttributes('width=1 color=navy'); $ui->setStringAttributes('width=60 font-size=14 background-color=#EEEEEE align=center'); $ui->setScript('progress_number.js'); foreach (range(0,2) as $index) { $ui->setCellAttributes('color=silver', $index); } foreach (range(3,6) as $index) { $ui->setCellAttributes('color=yellow', $index); } foreach (range(7,9) as $index) { $ui->setCellAttributes('color=orange', $index); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>BlueSandPlus Progress example</title> <style type="text/css"> <!-- <?php echo $bar->getStyle(); ?> body { background-color: #EEEEEE; color: #000000; font-family: Verdana, Arial; } // --> </style> <script type="text/javascript" src="<?php echo $bar->getScript(); ?>"></script> </head> <body> <?php echo $bar->toHtml(); do { $bar->display(); if ($bar->getPercentComplete() == 1) { break; // the progress bar has reached 100% } $bar->incValue(); } while(1); ?> </body> </html>
[Top]