Examples TOCexamples

Blue Sand

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

 Table of contents

Introduction

This example requires :

This example will run a natural horizontal ProgressBar with blue skin. It will also show you how to simulate percent text info outside the progress bar cell group, delimited by a thin border.

Percent text info is centered on a 60 pixels width area, on right side of the progress bar.

[Top]

 Render options

Here are options to build the progress bar cells : 
active-color   = #3874B4
inactive-color = #EEEECC
width          = 10
HTML_Progress_UI::setCellAttributes()
Here are options to build the progress bar border : 
width = 1
color = navy
HTML_Progress_UI::setBorderAttributes()
Here are options to build the progress bar string (percent text info): 
width            = 60
font-size        = 14
background-color = #EEEEEE
align            = center
HTML_Progress_UI::setStringAttributes()

[Top]

 Output

Screenshot

[Top]

 PHP source syntax highlight

  1. <?php
  2. /**
  3.  * Natural Horizontal ProgressBar example with blue skin.
  4.  * See also ProgressMaker usage with pre-set UI model 'BlueSand'.
  5.  *
  6.  * @version    $Id: bluesand.php,v 1.2 2005/07/25 10:25:30 farell Exp $
  7.  * @author     Laurent Laville <pear@laurent-laville.org>
  8.  * @package    HTML_Progress
  9.  * @subpackage Examples
  10.  */
  11.  
  12. require_once 'HTML/Progress.php';
  13.  
  14. $bar = new HTML_Progress();
  15. $bar->setAnimSpeed(100);
  16. $bar->setIncrement(10);
  17. $bar->setBorderPainted(true);
  18.  
  19. $ui =& $bar->getUI();
  20. $ui->setTab('    ');
  21. $ui->setCellAttributes('active-color=#3874B4 inactive-color=#EEEECC width=10');
  22. $ui->setBorderAttributes('width=1 color=navy');
  23. $ui->setStringAttributes('width=60 font-size=14 background-color=#EEEEEE align=center');
  24. ?>
  25. <!DOCTYPE html
  26.     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  27.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  28.  
  29. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  30. <head>
  31. <title>BlueSand Progress example</title>
  32. <style type="text/css">
  33. <!--
  34. <?php echo $bar->getStyle(); ?>
  35.  
  36. body {
  37.     background-color: #EEEEEE;
  38.     color: #000000;
  39.     font-family: Verdana, Arial;
  40. }
  41.  
  42. a:visited, a:active, a:link {
  43.     color: navy;
  44. }
  45. // -->
  46. </style>
  47. <script type="text/javascript">
  48. <!--
  49. <?php echo $bar->getScript(); ?>
  50. //-->
  51. </script>
  52. </head>
  53. <body>
  54.  
  55. <?php
  56. echo $bar->toHtml();
  57. $bar->run();
  58. ?>
  59.  
  60. </body>
  61. </html>

[Top]