D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
opt
/
lampp
/
lib
/
php
/
doc
/
HTML_Progress
/
examples
/
multiple
/
Filename :
vertical.html
back
Copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="robots" content="index,nofollow" /> <meta name="keywords" content"="HTML_Progress, progress meter, vertical bar, multiple" /> <meta name="description" content"="Multiple vertical progress meter" /> <meta name="author" content="Laurent Laville" /> <title>PEAR::HTML::Progress example: Multiple ProgressBar</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../examples.css" /> </head> <body> <a name="top"> <p><a href="../index.html"><img src="../images/home.gif" alt="Examples TOC"/>examples</a></p> <h1><span class="chapter">Multiple ProgressBar </span></h1> <p align="right">$Date: 2005/07/25 11:46:01 $</p> <div class="toc"> Table of contents </div> <ul> <li><a href="#intro">Introduction<a> <li><a href="#render">Render options<a> <li><a href="#output">Ouput</a> <li><a href="#source">PHP source syntax highlight<a> <li><a href="#run">Play demo<a> </ul> <a name="intro"> <h2><img src="../images/info.gif"/> Introduction</h2> <p>This example requires : <ul> <li>PEAR::HTML_Progress 1.2.2 or better (see source at line 11).</li> </ul> </p> <hr/> <p><b>This example will run two progress meter at same time.</b></p> <p>It will show two vertical progress bar running in opposite sides (down to up and reverse) with different increment step.</p> <p><b>Important: </b>In case you want to use more than one progress meter on a same page. <br/> To manage all bars easily, you need to identify them by a free simple code to avoid system to generate random values (see at lines 15 and 35).</p> <p><b>bar1</b> (on left side) will be filled from down to up (see line 20) with color scheme defined on lines 22 to 30.</p> <p><b>bar2</b> (on right side) will be filled from up to down (see line 40) with color scheme defined on lines 42 to 50.</p> <p>The loop that will display both progress meter at same time is defined on lines 117 to 119.</p> <p>If you want to do something corresponding to bar1 and bar2 process (see lines 114 and 117) you should set your own progress handler with method HTML_Progress::setProgressHandler(). Default is to do the HTML_Progress::sleep() action (see setAnimSpeed).</p> <p>[<a href="#top">Top</a>]</p> <a name="render"> <h2><img src="../images/config.gif"/> Render options </h2> Here are options to build the 1st progress bar cells (count=15 filled in natural way): <pre> active-color = #970038 inactive-color = #FFDDAA width = 50 height = 13 </pre> <div class="fig">HTML_Progress_UI::setCellAttributes()</div> Here are options to build the 1st progress bar border : <pre> width = 1 color = #000000 </pre> <div class="fig">HTML_Progress_UI::setBorderAttributes()</div> Here are options to build the 1st progress bar string : <pre> font-size = 8 color = #FF0000 background-color = #C3C6C3 align = center valign = bottom </pre> <div class="fig">HTML_Progress_UI::setStringAttributes()</div> Here are options to build the 2nd progress bar cells (count=15 filled in reverse way): <pre> active-color = #3874B4 inactive-color = #FFDDAA width = 50 height = 13 </pre> <div class="fig">HTML_Progress_UI::setCellAttributes()</div> Here are options to build the 2nd progress bar border : <pre> width = 1 style = dashed color = #000000 </pre> <div class="fig">HTML_Progress_UI::setBorderAttributes()</div> Here are options to build the 2nd progress bar string : <pre> font-size = 8 color = navy background-color = #C3C6C3 align = center valign = bottom </pre> <div class="fig">HTML_Progress_UI::setStringAttributes()</div> <p>[<a href="#top">Top</a>]</p> <a name="output"> <h2><img src="../images/image.gif"/> Output</h2> <h3>Screenshot </h3> <p><img src="../screenshots/vumeter.png"/></p> <p>[<a href="#top">Top</a>]</p> <a name="source"> <h2><img src="../images/source.gif"/> PHP source syntax highlight</h2> <a target="_blank" href="../highlighter.php?file=./multiple/vertical.php">Open</a> source listing in a new window. <p>[<a href="#top">Top</a>]</p> <a name="run"> <h2><img src="../images/run.gif"/> Play demo</h2> <p><a href="vertical.php">Run</a> the script.</p> <p>[<a href="#top">Top</a>]</p> </body> </html>