D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
opt
/
lampp
/
lib
/
php
/
doc
/
HTML_Progress
/
examples
/
horizontal
/
Filename :
bluesandplus.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" /> <meta name="description" content="horizontal progress meter with javascript customization " /> <meta name="author" content="Laurent Laville" /> <title>PEAR::HTML::Progress example: Blue Sand Plus</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">Blue Sand Plus </span></h1> <p align="right">$Date: 2005/07/25 10:25:30 $</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.</li> </ul> </p> <hr/> <p><b>This example will run a natural horizontal ProgressBar with blue skin. It will also show you how to print something inside cells with an external javascript (replaced internal code).</b></p> <p>Percent text info is centered on a 60 pixels width area, on right side of the progress bar.</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 progress bar cells : <pre> active-color = #3874B4 inactive-color = #EEEECC width = 10 </pre> <div class="fig">HTML_Progress_UI::setCellAttributes()</div> Here are options to build the progress bar border : <pre> width = 1 color = navy </pre> <div class="fig">HTML_Progress_UI::setBorderAttributes()</div> Here are options to build the progress bar string (percent text info): <pre> width = 60 font-size = 14 background-color = #EEEEEE align = center </pre> <div class="fig">HTML_Progress_UI::setStringAttributes()</div> Here is the external javascript source-code which replace internal code : <pre> var isDom = document.getElementById?true:false; var isIE = document.all?true:false; var isNS4 = document.layers?true:false; var cellCount = 10; function setprogress(pIdent, pValue, pString, pDeterminate) { if (isDom) prog = document.getElementById(pIdent+'installationProgress'); if (isIE) prog = document.all[pIdent+'installationProgress']; if (isNS4) prog = document.layers[pIdent+'installationProgress']; if (prog != null) prog.innerHTML = pString; if (pValue == pDeterminate) { for (i=0; i < cellCount; i++) { showCell(i, pIdent, "hidden"); } } if ((pDeterminate > 0) && (pValue > 0)) { i = (pValue-1) % cellCount; showCell(i, pIdent, "visible"); } else { for (i=pValue-1; i >=0; i--) { showCell(i, pIdent, "visible"); if (isDom) document.getElementById(pIdent+'progressCell'+i+'A').innerHTML = i; if (isIE) document.all[pIdent+'progressCell'+i+'A'].innerHTML = i; if (isNS4) document.layers[pIdent+'progressCell'+i+'A'].innerHTML = i; } } } function showCell(pCell, pIdent, pVisibility) { if (isDom) document.getElementById(pIdent+'progressCell'+pCell+'A').style.visibility = pVisibility; if (isIE) document.all[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility; if (isNS4) document.layers[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility; } </pre> <div class="fig">href: ./progress_number.js</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/bluesandplus.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=./horizontal/bluesandplus.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="bluesandplus.php">Run</a> the script.</p> <p>[<a href="#top">Top</a>]</p> </body> </html>