Question

有没有办法让单个XSLT文件显示CD集合的概述列表和单个CD的详细视图？

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的标题是否可以通过XML中的一个或多个元素链接到所选CD的更详细视图？怎么样？

Answer 1

最好的解决方案是XSLT和CSS的组合。使用XSLT，您构建了一个XHTML，其中包含某些部分中的链接和其他部分中的完整描述。然后使用CSS隐藏并显示用户链接激活的描述（处理有关crossbrowser的问题：active，：focus和：target pseudoclass）。不要试图同步的异步

Answer 2

使用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的详细视图

2 个答案: