使用XSLT详细查看

问题描述：

是否有任何方法让单个XSLT文件显示CD集合上的概览列表和单个CD的详细视图？使用XSLT详细查看

XML文件

<?xml version="1.0" encoding="ISO-8859-1"?> 
<catalog> 
    <cd> 
    <title>Empire Burlesque</title> 
    <artist>Bob Dylan</artist> 
    <country>USA</country> 
    <company>Columbia</company> 
    <price>10.90</price> 
    <year>1985</year> 
    </cd> 
. 
. 
</catalog>

XSLT文件

<?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>

的输出将是一个列表。有没有什么办法可以将CD的标题链接到更详细地查看选定CD的链接，并使用XML中的一个或多个元素？怎么样？

答

使用CSS和一些JavaScript显示和隐藏每个CD的细节。使用xslt写出所有CD的详细信息，然后使用css隐藏详细信息（display：none;）使用XSLT position（）函数为每张CD定义一个id，为每张CD生成一个唯一的id，然后使用jquery，切换CD详细信息的可见性。

<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>

答

最好的解决方案是XSLT和CSS的结合。使用XSLT，您可以在某个部分创建一个带有链接的XHTML，并在其他部分完整描述。然后使用CSS来隐藏和显示关于用户链接激活的描述（照顾crossbrowser关于：active，：focus和：target伪类的问题）。不要尝试异步的东西是同步的

相关推荐