Create an unordered list from a series of elements¶
This recipe demonstrates how you can create an unordered list from a series of elements.
Rules¶
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<replace css:content-children="#content" css:theme-children="#content"/>
<xsl:template css:match=".listingBar > span,.listingBar > a">
<li>
<xsl:copy>
<xsl:copy-of select="@*" />
<xsl:apply-templates />
</xsl:copy>
</li>
</xsl:template>
<xsl:template css:match=".listingBar">
<div class="pagination-centered">
<ul class="pagination">
<xsl:apply-templates />
</ul>
</div>
</xsl:template>
</rules>
Theme¶
<html>
<body>
<div id="content">
</div>
</body>
</html>
Content¶
<div id="content">
<div class="listingBar">
<span class="next">
<a href="?b_start:int=20">
Next
20
items
»
</a>
</span>
[<span>1</span>]
<a href="?b_start:int=20">2</a>
<a href="?b_start:int=40">3</a>
<a href="?b_start:int=60">4</a>
<a href="?b_start:int=80">5</a>
<a href="?b_start:int=100">6</a>
<a href="?b_start:int=120">7</a>
<span>
...
<a href="?b_start:int=680">35</a>
</span>
</div>
</div>
Output¶
<!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">
<body>
<div id="content">
<div class="pagination-centered"><ul class="pagination">
<li><span class="next">
<a href="?b_start:int=20">
Next
20
items
»
</a>
</span></li>
[<li><span>1</span></li>]
<li><a href="?b_start:int=20">2</a></li>
<li><a href="?b_start:int=40">3</a></li>
<li><a href="?b_start:int=60">4</a></li>
<li><a href="?b_start:int=80">5</a></li>
<li><a href="?b_start:int=100">6</a></li>
<li><a href="?b_start:int=120">7</a></li>
<li><span>
...
<a href="?b_start:int=680">35</a>
</span></li>
</ul></div>
</div>
</body>
</html>