Detailed View with XSLT
Is there any way to make a single XSLT file to show an overview list over a CD collection and a detailed view for single CD?
XML file
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
开发者_JAVA技巧 <country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
XSLT file
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<ul>
<xsl:for-each select="catalog/cd">
<li>
<xsl:value-of select="title"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The output will be a list. Is there any way that the title of the CD can be a link to a more detailed view over the selected CD with one or more elements from the XML? How?
Use css and some javascript to show and hide the details of each CD. Use the xslt to write out all the CD details and then use css to hide the details (display:none;) Define an id for each CD using the XSLT position() function to generate a unique id for each CD and then using jquery, toggle the visibility of the CD details.
<xsl:template match="/">
<html>
<head>
<style>
.hidden { display:none; }
.details { background-color: whitesmoke; border: 1px solid #ccc; font-size: small; padding-left: 10px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
function toggleDiv(id) {
$("#" + id).toggle("slow");
return false;
}
</script>
</head>
<body>
<h2>My CD Collection</h2>
<ul>
<xsl:for-each select="catalog/cd">
<li>
<a href="#" onclick="toggleDiv('div{position()}');">
<xsl:value-of select="title"/>
</a>
</li>
<div class="hidden details" id="div{position()}">
<p>Artist: <xsl:value-of select="artist"/></p>
<p>Country: <xsl:value-of select="country"/></p>
<p>Company: <xsl:value-of select="company"/></p>
<p>Price: $<xsl:value-of select="price"/></p>
<p>Year: <xsl:value-of select="year"/></p>
</div>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
The best solution is a combination of XSLT and CSS. With XSLT you built an XHTML with links in some section and full description in other section. Then use CSS to hide and show description on user link activation (take care of crossbrowser issues about :active, :focus, and :target pseudoclass). Don't try to asyncronous something that is syncronous
加载中,请稍侯......
精彩评论