Examples TOCexamples

JavaDanse

$Date: 2005/07/25 10:25:30 $

 Table of contents

Introduction

This example requires :

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]

 Render options

Here are options to build the progress bar cells : 
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)
HTML_Progress_UI::setCellAttributes()
Here are options to build the progress bar border : 
width = 1
color = #000000
HTML_Progress_UI::setBorderAttributes()
Here are options to build the progress bar string (percent text info): 
width     = 440
font-size = 14
color     = #FF0000
align     = center
valign    = bottom
HTML_Progress_UI::setStringAttributes()

[Top]

 Output

Screenshot

[Top]

 PHP source syntax highlight

  1. <?php
  2. /**
  3.  * 20 cells Reverse Horizontal ProgressBar example with JavaScript customization.
  4.  *
  5.  * @version    $Id: javadanse.php,v 1.2 2005/07/25 10:25:30 farell Exp $
  6.  * @author     Laurent Laville <pear@laurent-laville.org>
  7.  * @package    HTML_Progress
  8.  * @subpackage Examples
  9.  */
  10.  
  11. require_once 'HTML/Progress.php';
  12.  
  13. $bar = new HTML_Progress();
  14. $bar->setAnimSpeed(100);
  15. $bar->setIncrement(5);
  16. $bar->setBorderPainted(true);
  17.  
  18. $ui =& $bar->getUI();
  19. $ui->setTab('    ');
  20. $ui->setFillWay('reverse');
  21. $ui->setCellCount(20);
  22. $ui->setCellAttributes('active-color=#970038 inactive-color=#FFDDAA width=20 height=20');
  23. $ui->setBorderAttributes('width=1 color=#000000');
  24. $ui->setStringAttributes('width=440 font-size=14 color=#FF0000 align=center valign=bottom');
  25. $ui->setScript('progress_number.js');
  26.  
  27. foreach (range(0,2) as $index) {
  28.     $ui->setCellAttributes('color=red', $index);
  29. }
  30. foreach (range(3,6) as $index) {
  31.     $ui->setCellAttributes('color=yellow', $index);
  32. }
  33. foreach (range(7,9) as $index) {
  34.     $ui->setCellAttributes('color=white ', $index);
  35. }
  36. ?>
  37. <!DOCTYPE html
  38.     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  39.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  40.  
  41. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  42. <head>
  43. <title>JavaDanse Progress example</title>
  44. <style type="text/css">
  45. <!--
  46. <?php echo $bar->getStyle(); ?>
  47.  
  48. body {
  49.     background-color: #FFFFFF;
  50.     color: #000000;
  51.     font-family: Verdana, Arial;
  52. }
  53.  
  54. a:visited, a:active, a:link {
  55.     color: navy;
  56. }
  57. // -->
  58. </style>
  59. <script type="text/javascript" src="<?php echo $bar->getScript(); ?>"></script>
  60. </head>
  61. <body>
  62.  
  63. <?php
  64. echo $bar->toHtml();
  65. $bar->run();
  66. ?>
  67.  
  68. </body>
  69. </html>

[Top]