$Date: 2004/04/18 13:25:43 $
This example will run a reverse horizontal ProgressBar with javascript cell customization, as bluesandplus.php. It also show how to increase cell number (default is 10).
Percent text info is center aligned on bottom side of the progress bar.
[Top]
Build the progress bar
require_once 'HTML/Progress.php'; $bar = new HTML_Progress(); $bar->setAnimSpeed(100); $bar->setIncrement(5); $bar->setBorderPainted(true); $ui =& $bar->getUI(); $ui->setFillWay('reverse'); $ui->setCellCount(20); $ui->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=20 height=20'); $ui->setBorderAttributes('width=1 color=#000000'); $ui->setStringAttributes('width=440 font-size=14 color=#FF0000 align=center valign=bottom'); $ui->setScript('progress_number.js'); foreach (range(0,2) as $index) { $ui->setCellAttributes('color=red', $index); } foreach (range(3,6) as $index) { $ui->setCellAttributes('color=yellow', $index); } foreach (range(7,9) as $index) { $ui->setCellAttributes('color=white ', $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 = #970038 inactive-color = #FFDDAA width = 20 height = 20 color = red (cells: 0,1,2) color = yellow (cells: 3,4,5,6) color = white (cells: 7,8,9) color = black (default) (cells: 10 to 19)
width = 1 color = #000000
width = 440 font-size = 14 color = #FF0000 align = center valign = bottom
[Top]
[Top]
Run the script below :
<?php require_once 'HTML/Progress.php'; $bar = new HTML_Progress(); $bar->setAnimSpeed(100); $bar->setIncrement(5); $bar->setBorderPainted(true); $ui =& $bar->getUI(); $ui->setFillWay('reverse'); $ui->setCellCount(20); $ui->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=20 height=20'); $ui->setBorderAttributes('width=1 color=#000000'); $ui->setStringAttributes('width=440 font-size=14 color=#FF0000 align=center valign=bottom'); $ui->setScript('progress_number.js'); foreach (range(0,2) as $index) { $ui->setCellAttributes('color=red', $index); } foreach (range(3,6) as $index) { $ui->setCellAttributes('color=yellow', $index); } foreach (range(7,9) as $index) { $ui->setCellAttributes('color=white ', $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>JavaDanse Progress example</title> <style type="text/css"> <!-- <?php echo $bar->getStyle(); ?> body { background-color: #FFFFFF; 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]