The JSProgressBar class can be used to create a status indicator for any type of linear process.
While its name implies its use as a progress bar, it can also be used to visually indicate position within a structured process:
Process Status:
The Code to generate a progress bar is encapsulated in a single static PHP class: JSProgressBar, and an optional external javaScript file. The PHP class handles the creation of the initial Progress Bar, and the javaScript file provides all DHTML for controlling the progress bar from script.
JSProgressBar has two methods: InlineCSS which returns a string of CSS for formatting the calendars and Bar which builds the progress bar.
Bar takes a DOM id string, and an array whose values represent the Progress Bar divisions. Optional parameters allow the configuration of several options, including width of the bar, initial index, and whether divisions and their labels are shown.
Future plans are to rebuild the JSProgressBar class to improve the interface and streamline progress bar creation.
The Code to generate the above Progress Bars is as follows:
$wps = array();
for ($i=0; $i < 100; ++$i) {
$wps[] = "$i";
}
echo JSProgressBar::Bar( 'pb1', $wps ,0,'50%',false);
$wps = array('Start','Planning','Designing','Building','Testing','Finishing','End');
$content .= JSProgressBar::Bar( 'pb2', $wps ,0, '100%', true, true);