Подробный просмотр с XSLT

Есть ли способ сделать один XSLT-файл, чтобы показать обзорный список по коллекции компакт-дисков и подробный просмотр для одного компакт-диска?Подробный просмотр с 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>

Выход будет список. Есть ли способ, которым название компакт-диска может быть ссылкой на более подробный вид на выбранный компакт-диск с одним или несколькими элементами из XML? Как?

источник

2010-08-26 user265767

Используйте css и некоторые javascript, чтобы показать и скрыть сведения о каждом компакт-диске. Используйте xslt для записи всех данных компакт-диска, а затем используйте css, чтобы скрыть детали (display: none;) Определите идентификатор для каждого компакт-диска, используя функцию XSLT position(), чтобы сгенерировать уникальный идентификатор для каждого компакт-диска, а затем использовать jquery, переключите видимость деталей компакт-диска.

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

источник

2010-09-01 11:33:37 Catch22

Лучшее решение - это сочетание XSLT и CSS. С XSLT вы создали XHTML со ссылками в некоторых разделах и полным описанием в другом разделе. Затем используйте CSS, чтобы скрыть и показать описание при активации пользовательской ссылки (позаботьтесь о проблемах с кроссбраузером: active,: focus и: target pseudoclass). Не пытайтесь асинхронно что-то синхронное

источник

2010-08-26 22:14:58

Подробный просмотр с XSLT

ответ

Смежные вопросы