Детальный просмотр с XSLT - PullRequest
Новая
       1

Детальный просмотр с XSLT

1 голос
/ 27 августа 2010

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

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

Ответы [ 2 ]

0 голосов
/ 01 сентября 2010

Используйте CSS и некоторые JavaScript, чтобы показать и скрыть детали каждого компакт-диска. Используйте xslt, чтобы записать все детали CD, а затем используйте 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>
0 голосов
/ 27 августа 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...