Examples TOCexamples

Background Images

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

 Table of contents

Introduction

This example requires :


This example will run a natural horizontal ProgressBar and show you how to use a picture instead of simple color for active cells.

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

[Top]

 Render options

Here are options to build the progress bar cells :
active-color     = #000084
inactive-color   = #3A6EA5
width            = 25
spacing          = 0
background-image = download.gif
HTML_Progress_UI::setCellAttributes()
Here are options to build the progress bar border :
width = 1
style = inset
color = white
HTML_Progress_UI::setBorderAttributes()
Here are options to build the progress bar string (percent text info):
width            = 60
font-size        = 10
background-color = #C3C6C3
align            = center
valign           = left
HTML_Progress_UI::setStringAttributes()

[Top]

 Output

Screenshot

[Top]

 PHP source syntax highlight

  1. <?php
  2. /**
  3.  * Natural Horizontal with background images ProgressBar example.
  4.  * See also ProgressMaker usage with pre-set UI model 'BgImages'.
  5.  *
  6.  * @version    $Id: bgimages.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(array(
  22.     'active-color' => '#000084',
  23.     'inactive-color' => '#3A6EA5',
  24.     'width' => 25,
  25.     'spacing' => 0,
  26.     'background-image' => 'download.gif'
  27. ));
  28. $ui->setBorderAttributes('width=1 style=inset color=white');
  29. $ui->setStringAttributes(array(
  30.     'width' => 60,
  31.     'font-size' => 10,
  32.     'background-color' => '#C3C6C3',
  33.     'align' => 'center',
  34.     'valign' => 'left'
  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>BgImages Progress example</title>
  44. <style type="text/css">
  45. <!--
  46. <?php echo $bar->getStyle(); ?>
  47.  
  48. body {
  49.     background-color: #C3C6C3;
  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">
  60. <!--
  61. <?php echo $bar->getScript(); ?>
  62. //-->
  63. </script>
  64. </head>
  65. <body>
  66.  
  67. <?php
  68. echo $bar->toHtml();
  69. $bar->run();
  70. ?>
  71.  
  72. </body>
  73. </html>

[Top]