<?xml version="1.0" encoding="iso-8859-1"?>
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Reuse CSS
</title>
<link rel="stylesheet" href="book.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.69.1" />
<link rel="start" href="index.html" title="HTML_Progress2 Manual" />
<link rel="up" href="ch14.html" title=
"Chapter 14. New Features in HTML_Progress2 " />
<link rel="prev" href="ch14s02.html" title="Error Handling" />
<link rel="next" href="pt04.html" title=
"Part IV. Reference Guide" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: white;
color: black;
}
:link { color: #0000FF }
:visited { color: #840084 }
:active { color: #0000FF }
div.c4 {margin-left: 0.5in; margin-right: 0.5in;}
div.c3 {font-family: monospace;}
p.c2 {font-weight: bold}
h2.c1 {clear: both}
/*]]>*/
</style>
</head>
<body>
<table class="progress2Header">
<tr>
<td>
<img src="img/pear_progress2.gif" align="left" alt=
"PEAR Progress2 logo" />
<h1>
HTML_Progress2 : The Definitive Guide
</h1>
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center">
Reuse CSS
</th>
</tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="ch14s02.html">Prev</a>
</td>
<th width="60%" align="center">
Chapter 14. New Features in HTML_Progress2
</th>
<td width="20%" align="right">
<a accesskey="n" href="pt04.html">Next</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="sect1" lang="en" xml:lang="en">
<div class="titlepage">
<h2 class="title c1">
<a name="id4799963" id="id4799963"></a>Reuse CSS
</h2>
</div>
<div class="toc">
<dl>
<dt>
<span class="sect2"><a href="ch14s03.html#id4799982">Step 1 :
Extract Javascript code</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800241">Step 2 :
Extract CSS code</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800337">Step 3 :
Remove HTML_Progress2 css properties</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4800430">Step 4 :
Adjust CSS class selector</a></span>
</dt>
<dt>
<span class="sect2"><a href="ch14s03.html#id4799869">Step 5 : play
with new pattern</a></span>
</dt>
</dl>
</div>
<p>
This section is intended to provide a HOWTO guide that you should
follow step by step to discover the new feature of HTML_Progress2
version 2.2.0
</p>
<p>
Until now we should used HTML_Progress2 API to set all styles (color,
size, font, ...) of our progress bars. We will discover now with
<code class="methodname">HTML_Progress2::importStyle()</code> method
that it can be done in one step and PHP code is more reusable. We can
change look and feel only on modify CSS data source.
</p>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4799982" id="id4799982"></a>Step 1 : Extract Javascript
code
</h3>
</div>
<p>
We will use the <span class="bold"><strong>Ancestor</strong></span>
example (included into the package distribution), all long of this
demonstration.
</p>
<p>
Here are the original source code (without header).
</p>
<div class="example">
<a name="id4800003" id="id4800003"></a>
<p class="title c2">
Example 14.1. script: <code class=
"filename">examples/horizontal/ancestor.php</code>
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class=
"br0">(</span><span class="nu0">200</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setIncrement</span><span class=
"br0">(</span><span class="nu0">10</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="st0">'pct1'</span><span class=
"sy0">,</span> <span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'width'</span> <span class=
"sy0">=></span> <span class="nu0">60</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'height'</span> <span class=
"sy0">=></span> <span class="nu0">24</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'top'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'left'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'background-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#FFFFFF'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'font-size'</span>
<span class="sy0">=></span> <span class=
"nu0">14</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'align'</span> <span class=
"sy0">=></span> <span class="st0">'center'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!</span>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml<span class=
"sy0">:</span>lang<span class="sy0">=</span><span class=
"st0">"en"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>title<span class=
"sy0">></span>Ancestor Progress2 example<span class=
"sy0"></</span>title<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>style type<span class=
"sy0">=</span><span class="st0">"text/css"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span> <span class=
"kw3">echo</span> <span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">getStyle</span><span class="br0">(</span><span class=
"br0">)</span><span class="sy0">;</span> <span class=
"kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
background<span class=
"sy0">-</span>color<span class="sy0">:</span> <span class=
"co2">#444444;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>style<span class=
"sy0">></span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="kw2"><?php</span> <span class=
"kw3">echo</span> <span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">getScript</span><span class="br0">(</span><span class=
"kw2">false</span><span class="br0">)</span><span class=
"sy0">;</span> <span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>head<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>body<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">display</span><span class="br0">(</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">run</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>body<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>html<span class=
"sy0">></span>
</div>
</li>
</ol>
</div>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Line 31 :</span>
</dt>
<dd>
<p>
Due to minor fix we have to do later in javascript code, lets
begin by replace this line by a reference to an external JS
file.
</p>
<div class="html4strict c3">
<ol>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><script</span>
<span class="kw3">type</span><span class=
"sy0">=</span><span class="st0">"text/javascript"</span>
<span class="kw3">src</span><span class=
"sy0">=</span><span class=
"st0">"progress2BasicHandler.js"</span><span class=
"kw2">></span></span><span class=
"sc2 kw2"></script></span>
</div>
</li>
</ol>
</div>
<p>
What content is :
</p>
<div class="example">
<a name="id4800080" id="id4800080"></a>
<p class="title c2">
Example 14.2. script: <code class=
"filename">progress2BasicHandler.js</code>
</p>
<div class="javascript c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
setProgress<span class="br0">(</span>pIdent, pValue,
pDeterminate, pCellCount<span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span>pValue == pDeterminate<span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">for</span> <span class="br0">(</span><span class=
"kw2">var</span> i = <span class="nu0">0</span>; i
<span class="sy0"><</span> pCellCount;
i++<span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
showCell<span class="br0">(</span>i, pIdent,
<span class="st0">'I'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">if</span> <span class=
"br0">(</span><span class="br0">(</span>pDeterminate
<span class="sy0">></span> <span class=
"nu0">0</span><span class="br0">)</span> <span class=
"sy0">&&</span> <span class=
"br0">(</span>pValue <span class="sy0">></span>
<span class="nu0">0</span><span class=
"br0">)</span><span class="br0">)</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw2">var</span> i = <span class="br0">(</span>pValue -
<span class="nu0">1</span><span class="br0">)</span>
<span class="sy0">%</span> pCellCount;
</div>
</li>
<li class="li1">
<div class="de1">
showCell<span class=
"br0">(</span>i, pIdent, <span class=
"st0">'A'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span> <span class=
"kw1">else</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">for</span> <span class="br0">(</span><span class=
"kw2">var</span> i = pValue - <span class=
"nu0">1</span>; i <span class="sy0">></span>=
<span class="nu0">0</span>; i--<span class=
"br0">)</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
showCell<span class="br0">(</span>i, pIdent,
<span class="st0">'A'</span><span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span> showCell<span class=
"br0">(</span>pCell, pIdent, pVisibility<span class=
"br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> <span class=
"kw3">name</span> = <span class="st0">'pcel'</span> +
pCell + pIdent;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> cellElement
= document.<span class=
"me1">getElementById</span><span class=
"br0">(</span><span class="kw3">name</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
cellElement.<span class=
"me1">className</span> = <span class=
"st0">'cell'</span> + pIdent + pVisibility;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
hideProgress<span class=
"br0">(</span>pIdent<span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> <span class=
"kw3">name</span> = <span class="st0">'tfrm'</span> +
pIdent;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> tfrm =
document.<span class=
"me1">getElementById</span><span class=
"br0">(</span><span class="kw3">name</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
tfrm.<span class=
"me1">style</span>.<span class="me1">visibility</span>
= <span class="st0">"hidden"</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
setLabelText<span class="br0">(</span>pIdent, pName,
pText<span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> <span class=
"kw3">name</span> = <span class="st0">'plbl'</span> +
pName + pIdent;
</div>
</li>
<li class="li1">
<div class="de1">
document.<span class=
"me1">getElementById</span><span class=
"br0">(</span><span class="kw3">name</span><span class=
"br0">)</span>.<span class=
"me1">firstChild</span>.<span class=
"me1">nodeValue</span> = pText;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
setElementStyle<span class="br0">(</span>pPrefix,
pName, pIdent, pStyles<span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> <span class=
"kw3">name</span> = pPrefix + pName + pIdent;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> styles =
pStyles.<span class="me1">split</span><span class=
"br0">(</span><span class="st0">';'</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
styles.<span class=
"me1">pop</span><span class="br0">(</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">for</span> <span class=
"br0">(</span><span class="kw2">var</span> i =
<span class="nu0">0</span>; i <span class=
"sy0"><</span> styles.<span class=
"me1">length</span>; i++<span class="br0">)</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw2">var</span> s = styles<span class=
"br0">[</span>i<span class="br0">]</span>.<span class=
"me1">split</span><span class=
"br0">(</span><span class="st0">':'</span><span class=
"br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw2">var</span> c = <span class=
"st0">'document.getElementById(name).style.'</span> +
s<span class="br0">[</span><span class=
"nu0">0</span><span class="br0">]</span> + <span class=
"st0">'="'</span> + s<span class=
"br0">[</span><span class="nu0">1</span><span class=
"br0">]</span> + <span class="st0">'"'</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">eval</span><span class=
"br0">(</span>c<span class="br0">)</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">function</span>
setRotaryCross<span class="br0">(</span>pIdent,
pName<span class="br0">)</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> <span class=
"kw3">name</span> = <span class="st0">'plbl'</span> +
pName + pIdent;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">var</span> cross =
document.<span class=
"me1">getElementById</span><span class=
"br0">(</span><span class="kw3">name</span><span class=
"br0">)</span>.<span class=
"me1">firstChild</span>.<span class=
"me1">nodeValue</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">switch</span><span class=
"br0">(</span>cross<span class="br0">)</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">"--"</span>: cross
= <span class="st0">"<span class=
"es0">\\</span>"</span>; <span class=
"kw1">break</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">"<span class=
"es0">\\</span>"</span>: cross = <span class=
"st0">"|"</span>; <span class="kw1">break</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">case</span> <span class="st0">"|"</span>: cross =
<span class="st0">"/"</span>; <span class=
"kw1">break</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw2">default</span>: cross = <span class=
"st0">"--"</span>; <span class="kw1">break</span>;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
document.<span class=
"me1">getElementById</span><span class=
"br0">(</span><span class="kw3">name</span><span class=
"br0">)</span>.<span class=
"me1">firstChild</span>.<span class=
"me1">nodeValue</span> = cross;
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
</div>
</dd>
</dl>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4800241" id="id4800241"></a>Step 2 : Extract CSS code
</h3>
</div>
<p>
First, identify the progress bar with a static identifier, for
example <code class="literal">PB1</code>. (see line 5), rather than
used the default identifier that change on each run.
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">setIdent</span><span class=
"br0">(</span><span class="st0">'PB1'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">//...</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!</span>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml<span class=
"sy0">:</span>lang<span class="sy0">=</span><span class=
"st0">"en"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>title<span class=
"sy0">></span>Ancestor Progress2 example<span class=
"sy0"></</span>title<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>style type<span class=
"sy0">=</span><span class="st0">"text/css"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="kw2"><?php</span> <span class="kw3">echo</span>
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">getStyle</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span> <span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
background<span class=
"sy0">-</span>color<span class="sy0">:</span> <span class=
"co2">#444444;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>style<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span> <span class="kw3">echo</span>
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">getScript</span><span class="br0">(</span><span class=
"kw2">false</span><span class="br0">)</span><span class=
"sy0">;</span> <span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>head<span class="sy0">></span>
</div>
</li>
</ol>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Line 15 :</span>
</dt>
<dd>
<p>
Replace dynamic reference <code class=
"methodname">HTML_Progress2::getStyle()</code> to inline
stylesheet by a reference to a static file <code class=
"filename">ancestor.css</code>.
</p>
<div class="html4strict c3">
<ol>
<li class="li1">
<div class="de1">
<span class="sc2"><span class="kw2"><link</span>
<span class="kw3">rel</span><span class=
"sy0">=</span><span class="st0">"stylesheet"</span>
<span class="kw3">type</span><span class=
"sy0">=</span><span class="st0">"text/css"</span>
<span class="kw3">href</span><span class=
"sy0">=</span><span class="st0">"ancestor.css"</span>
<span class="sy0">/</span><span class=
"kw2">></span></span>
</div>
</li>
</ol>
</div>
<p>
What content is :
</p>
<div class="example">
<a name="id4800301" id="id4800301"></a>
<p class="title c2">
Example 14.3. <code class=
"filename">ancestor.css</code>
</p>
<div class="css c3">
<ol>
<li class="li1">
<div class="de1">
<span class="re1">.cellPB1I</span>, <span class=
"re1">.cellPB1A</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class=
"re3">15px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class=
"re3">20px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Courier, Verdana<span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">8px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">float</span><span class=
"sy0">:</span> <span class=
"kw1">left</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">.progressBorderPB1</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class=
"re3">172px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class=
"re3">24px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">background-color</span><span class="sy0">:</span>
<span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">.progressPercentLabelpct1PB1</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class=
"re3">60px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class=
"re3">24px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">text-align</span><span class=
"sy0">:</span> <span class=
"kw2">center</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">background-color</span><span class="sy0">:</span>
<span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class=
"re3">14px</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Verdana, Tahoma, Arial<span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-weight</span><span class=
"sy0">:</span> <span class=
"kw2">normal</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">color</span><span class=
"sy0">:</span> <span class="re0">#<span class=
"nu0">000000</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">.cellPB1I</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">background-color</span><span class="sy0">:</span>
<span class="re0">#CCCCCC</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">.cellPB1A</span> <span class=
"br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"kw1">background-color</span><span class="sy0">:</span>
<span class="re0">#<span class=
"nu0">006600</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
</div>
<p>
And don't forget to add the new method <code class=
"methodname">HTML_Progress2::importStyle()</code> to your PHP
script, with url of your external stylesheet.
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// ...</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">importStyle</span><span class=
"br0">(</span><span class=
"st0">'ancestor.css'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!</span>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML
1.0 Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span>
xml<span class="sy0">:</span>lang<span class=
"sy0">=</span><span class="st0">"en"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span> <span class=
"sy0">...</span> <span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>html<span class=
"sy0">></span>
</div>
</li>
</ol>
</div>
</dd>
</dl>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4800337" id="id4800337"></a>Step 3 : Remove
HTML_Progress2 css properties
</h3>
</div>
<p>
If you have followed all previous explains, your code should be
something like this one :
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">setIdent</span><span class=
"br0">(</span><span class="st0">'PB1'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class="br0">(</span><span class=
"nu0">200</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setIncrement</span><span class="br0">(</span><span class=
"nu0">10</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="st0">'pct1'</span><span class=
"sy0">,</span> <span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'width'</span> <span class=
"sy0">=></span> <span class="nu0">60</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'height'</span> <span class=
"sy0">=></span> <span class="nu0">24</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'top'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'left'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'background-color'</span>
<span class="sy0">=></span> <span class=
"st0">'#FFFFFF'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'font-size'</span> <span class=
"sy0">=></span> <span class="nu0">14</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'align'</span> <span class=
"sy0">=></span> <span class="st0">'center'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">importStyle</span><span class="br0">(</span><span class=
"st0">'ancestor.css'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!</span>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml<span class=
"sy0">:</span>lang<span class="sy0">=</span><span class=
"st0">"en"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>title<span class=
"sy0">></span>Ancestor Progress2 example<span class=
"sy0"></</span>title<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>link rel<span class=
"sy0">=</span><span class="st0">"stylesheet"</span>
type<span class="sy0">=</span><span class=
"st0">"text/css"</span> href<span class=
"sy0">=</span><span class="st0">"ancestor.css"</span>
<span class="sy0">/></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>style type<span class=
"sy0">=</span><span class="st0">"text/css"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span>
</div>
</li>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
background<span class=
"sy0">-</span>color<span class="sy0">:</span> <span class=
"co2">#444444;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>style<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>script type<span class=
"sy0">=</span><span class="st0">"text/javascript"</span>
src<span class="sy0">=</span><span class=
"st0">"progress2BasicHandler.js"</span><span class=
"sy0">></</span>script<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>body<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">display</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">run</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>body<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>html<span class="sy0">></span>
</div>
</li>
</ol>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Lines 10-11, 14-15 :</span>
</dt>
<dd>
<p>
These lines corresponding to same CSS properties from
<code class="literal">.progressPercentLabelpct1PB1</code> class
selector.
</p>
</dd>
<dt>
<span class="term">Lines 12-13 :</span>
</dt>
<dd>
<p>
Defines the progress bar position (relative) into browser
frame.
</p>
</dd>
<dt>
<span class="term">Line 16 :</span>
</dt>
<dd>
<p>
Give percent text label alignment. There is no CSS property
equivalence.
</p>
</dd>
</dl>
</div>
<div class="important c4">
<table border="0" summary="Important">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Important]" src="img/admons/important.png" />
</td>
<th align="left">
Important
</th>
</tr>
<tr>
<td align="left" valign="top">
Don't forget to remove lines 10-11, 14-15 to get PHP code
without CSS references.
</td>
</tr>
</table>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4800430" id="id4800430"></a>Step 4 : Adjust CSS class
selector
</h3>
</div>
<p>
To get possibility to handle all your progress bar look and feel
(style) with only a stylesheet, we still need to modify the PHP
script and a little line in JS script.
</p>
<p>
Begin with PHP source code :
</p>
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">setIdent</span><span class=
"br0">(</span><span class="st0">'PB1'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setAnimSpeed</span><span class="br0">(</span><span class=
"nu0">200</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setIncrement</span><span class="br0">(</span><span class=
"nu0">10</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setBorderAttributes</span><span class=
"br0">(</span><span class=
"st0">'class=progressBorder'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setCellAttributes</span><span class=
"br0">(</span><span class="st0">'class=cell'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setLabelAttributes</span><span class=
"br0">(</span><span class="st0">'pct1'</span><span class=
"sy0">,</span> <span class="kw3">array</span><span class=
"br0">(</span>
</div>
</li>
<li class="li1 ln-xtra">
<div class="de1">
<span class="st0">'class'</span> <span class=
"sy0">=></span> <span class=
"st0">'progressPercentLabel'</span><span class="sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'top'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'left'</span> <span class=
"sy0">=></span> <span class="nu0">0</span><span class=
"sy0">,</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="st0">'align'</span> <span class=
"sy0">=></span> <span class="st0">'center'</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">)</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">importStyle</span><span class="br0">(</span><span class=
"st0">'ancestor.css'</span><span class=
"br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!</span>DOCTYPE html <span class=
"kw2">PUBLIC</span> <span class="st0">"-//W3C//DTD XHTML 1.0
Strict//EN"</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class=
"st0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>html xmlns<span class=
"sy0">=</span><span class=
"st0">"http://www.w3.org/1999/xhtml"</span> xml<span class=
"sy0">:</span>lang<span class="sy0">=</span><span class=
"st0">"en"</span><span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>title<span class=
"sy0">></span>Ancestor Progress2 example<span class=
"sy0"></</span>title<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>link rel<span class=
"sy0">=</span><span class="st0">"stylesheet"</span>
type<span class="sy0">=</span><span class=
"st0">"text/css"</span> href<span class=
"sy0">=</span><span class="st0">"ancestor.css"</span>
<span class="sy0">/></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>style type<span class=
"sy0">=</span><span class="st0">"text/css"</span><span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><!--</span>
</div>
</li>
<li class="li1">
<div class="de1">
body <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
background<span class=
"sy0">-</span>color<span class="sy0">:</span> <span class=
"co2">#444444;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0">--></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>style<span class=
"sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>script type<span class=
"sy0">=</span><span class="st0">"text/javascript"</span>
src<span class="sy0">=</span><span class=
"st0">"progress2BasicHandler.js"</span><span class=
"sy0">></</span>script<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>head<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"><</span>body<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">display</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class="me1">run</span><span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>body<span class="sy0">></span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="sy0"></</span>html<span class="sy0">></span>
</div>
</li>
</ol>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Line 9 :</span>
</dt>
<dd>
<p>
Add this line to change the progress border CSS class selector.
Remember, default is : <code class=
"literal">progressBorder%s</code>, where %s is the placeholder
to include progress bar identifier (return by <code class=
"methodname">HTML_Progress2::getIdent()</code>).
</p>
</dd>
<dt>
<span class="term">Line 10 :</span>
</dt>
<dd>
<p>
Add this line to change the cell CSS class selector. Remember,
default is : <code class="literal">cell%s</code>, where %s is
the placeholder to include progress bar identifier (return by
<code class="methodname">HTML_Progress2::getIdent()</code>).
</p>
</dd>
<dt>
<span class="term">Line 12 :</span>
</dt>
<dd>
<p>
Add this line to change the progress percent label CSS class
selector. Remember, default is : <code class=
"literal">progressPercentLabel%s</code>, where %s is the
placeholder to include label and progress bar identifiers.
</p>
</dd>
</dl>
</div>
<p>
Last, to finish our modifications, we need to remove the progress bar
identifier placeholder into JS script: <code class=
"filename">progress2BasicHandler.js</code> at line 22. From :
</p>
<div class="html4strict c3">
<ol>
<li class="li1">
<div class="de1">
cellElement.className = 'cell' + pIdent + pVisibility;
</div>
</li>
</ol>
</div>
<p>
To :
</p>
<div class="html4strict c3">
<ol>
<li class="li1">
<div class="de1">
cellElement.className = 'cell' + pVisibility;
</div>
</li>
</ol>
</div>
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<h3 class="title">
<a name="id4799869" id="id4799869"></a>Step 5 : play with new
pattern
</h3>
</div>
<p>
Modify again the stylesheet to identify by another way the progress
bar identifier that was removed from CSS class selector, in previous
step.
</p>
<div class="example">
<a name="id4799885" id="id4799885"></a>
<p class="title c2">
Example 14.4. New content of <code class=
"filename">ancestor.css</code>
</p>
<div class="css c3">
<ol>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellI</span>, <span class="re0">#pbarPB1</span>
<span class="re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">15px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">20px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Courier, Verdana<span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">8px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">float</span><span class=
"sy0">:</span> <span class="kw1">left</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbrdPB1</span><span class=
"re1">.progressBorder</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">172px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">24px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#plblpct1PB1</span><span class=
"re1">.progressPercentLabel</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">60px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">24px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">text-align</span><span class=
"sy0">:</span> <span class="kw2">center</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">14px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Verdana, Tahoma, Arial<span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-weight</span><span class=
"sy0">:</span> <span class="kw2">normal</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">color</span><span class=
"sy0">:</span> <span class="re0">#<span class=
"nu0">000000</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellI</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#CCCCCC</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#<span class=
"nu0">006600</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Lines 1, 26, 30 :</span>
</dt>
<dd>
<p>
Remove reference to progress bar identifier <code class=
"literal">PB1</code>, and add the <div> identifier
<code class="literal">#pbarPB1</code> for each cell class
selector (active, inactive).
</p>
<div class="caution c4">
<table border="0" summary="Caution">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Caution]" src="img/admons/caution.png" />
</td>
<th align="left">
Caution
</th>
</tr>
<tr>
<td align="left" valign="top">
Don't forget to add a blank between <code class=
"literal">#pbarPB1</code> and <code class=
"literal">.cellI</code> (or <code class=
"literal">.cellA</code>)
</td>
</tr>
</table>
</div>
</dd>
<dt>
<span class="term">Line 9 :</span>
</dt>
<dd>
<p>
Remove reference to progress bar identifier <code class=
"literal">PB1</code>, and add the <div> identifier
<code class="literal">#pbrdPB1</code>.
</p>
</dd>
<dt>
<span class="term">Line 15 :</span>
</dt>
<dd>
<p>
Remove reference to progress bar identifier <code class=
"literal">PB1</code>, percent label <code class=
"literal">pct1</code>, and add the <div> identifier
<code class="literal">#plblpct1PB1</code>.
</p>
</dd>
</dl>
</div>
<p>
All components (PHP script and CSS file) are ready to play with them
and change color, size, ... Almost what you want.
</p>
<div class="tip c4">
<table border="0" summary="Tip">
<tr>
<td rowspan="2" align="center" valign="top" width="48">
<img alt="[Tip]" src="img/admons/tip.png" />
</td>
<th align="left">
Tip
</th>
</tr>
<tr>
<td align="left" valign="top">
To switch from a skin to another, you just have to change
progress bar identifier in PHP script.
<div class="php c3">
<ol>
<li class="li1">
<div class="de1">
<span class="kw2"><?php</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">require_once</span> <span class=
"st0">'HTML/Progress2.php'</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span> <span class="sy0">=</span>
<span class="kw2">new</span> HTML_Progress2<span class=
"br0">(</span><span class="br0">)</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re1">$pb</span><span class=
"sy0">-></span><span class=
"me1">setIdent</span><span class=
"br0">(</span><span class=
"st0">'PB1'</span><span class="br0">)</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// $pb->setIdent('PB2');</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="co1">// ...</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw2">?></span>
</div>
</li>
</ol>
</div>
</td>
</tr>
</table>
</div>
<div class="example">
<a name="id4802315" id="id4802315"></a>
<p class="title c2">
Example 14.5. <code class="filename">ancestor.css</code>
with two skins
</p>
<div class="css c3">
<ol>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellI</span>, <span class="re0">#pbarPB1</span>
<span class="re1">.cellA</span>, <span class=
"re0">#pbarPB2</span> <span class="re1">.cellI</span>,
<span class="re0">#pbarPB2</span> <span class=
"re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">15px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">20px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Courier, Verdana<span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">8px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">float</span><span class=
"sy0">:</span> <span class="kw1">left</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB2</span> <span class=
"re1">.cellI</span>, <span class="re0">#pbarPB2</span>
<span class="re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">10px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbrdPB1</span><span class=
"re1">.progressBorder</span>, <span class=
"re0">#pbrdPB2</span><span class="re1">.progressBorder</span>
<span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">172px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">24px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbrdPB2</span><span class=
"re1">.progressBorder</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">122px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">border-width</span><span class=
"sy0">:</span> <span class="re3">1px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">border-style</span><span class=
"sy0">:</span> <span class="kw2">solid</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">border-color</span><span class=
"sy0">:</span> <span class="kw2">navy</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#plblpct1PB1</span><span class=
"re1">.progressPercentLabel</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">60px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">height</span><span class=
"sy0">:</span> <span class="re3">24px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">text-align</span><span class=
"sy0">:</span> <span class="kw2">center</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#FFFFFF</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">14px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Verdana, Tahoma, Arial<span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-weight</span><span class=
"sy0">:</span> <span class="kw2">normal</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">color</span><span class=
"sy0">:</span> <span class="re0">#<span class=
"nu0">000000</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#plblpct1PB2</span><span class=
"re1">.progressPercentLabel</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">width</span><span class=
"sy0">:</span> <span class="re3">60px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">text-align</span><span class=
"sy0">:</span> <span class="kw2">center</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class=
"kw2">transparent</span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-size</span><span class=
"sy0">:</span> <span class="re3">14px</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-family</span><span class=
"sy0">:</span> Verdana, Tahoma, Arial<span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">font-weight</span><span class=
"sy0">:</span> <span class="kw2">normal</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">color</span><span class=
"sy0">:</span> <span class="kw2">white</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellI</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#CCCCCC</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB1</span> <span class=
"re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#<span class=
"nu0">006600</span></span><span class="sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB2</span> <span class=
"re1">.cellI</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#EEEECC</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="re0">#pbarPB2</span> <span class=
"re1">.cellA</span> <span class="br0">{</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="kw1">background-color</span><span class=
"sy0">:</span> <span class="re0">#3874B4</span><span class=
"sy0">;</span>
</div>
</li>
<li class="li1">
<div class="de1">
<span class="br0">}</span>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<table class="progress2Footer">
<tr>
<td align="left">
HTML_Progress2 : The Definitive Guide
</td>
<td align="right">
v 2.4.0 : April 20, 2007
</td>
</tr>
</table>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="ch14s02.html">Prev</a>
</td>
<td width="20%" align="center">
<a accesskey="u" href="ch14.html">Up</a>
</td>
<td width="40%" align="right">
<a accesskey="n" href="pt04.html">Next</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">
Error Handling
</td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top">
Part IV. Reference Guide
</td>
</tr>
</table>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
89346381d9fb64d9ee8827de5f073355
>
files
>
50
