Vue détaillée avec XSLT

Existe-t-il un moyen de créer un fichier XSLT unique pour afficher une liste de synthèse sur une collection de CD et une vue détaillée pour un seul CD?Vue détaillée avec XSLT

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

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

La sortie sera une liste. Est-il possible que le titre du CD puisse être un lien vers une vue plus détaillée sur le CD sélectionné avec un ou plusieurs éléments du XML? Comment?

Source

2010-08-26 user265767

Utilisez css et du javascript pour afficher et masquer les détails de chaque CD. Utilisez le xslt pour écrire tous les détails du CD, puis utilisez css pour masquer les détails (affichage: aucun;) Définissez un ID pour chaque CD en utilisant la fonction XSLT position() pour générer un ID unique pour chaque CD, puis en utilisant jquery, active la visibilité des détails du 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>

Source

2010-09-01 11:33:37 Catch22

La meilleure solution est une combinaison de XSLT et CSS. Avec XSLT vous avez construit un XHTML avec des liens dans certaines sections et une description complète dans une autre section. Utilisez ensuite CSS pour masquer et afficher la description de l'activation du lien utilisateur (prenez en compte les problèmes de navigateur concernant: active,: focus et: pseudoclass cible). N'essayez pas d'asynchrone quelque chose qui est synchrone

Source

2010-08-26 22:14:58

Vue détaillée avec XSLT

Répondre

Questions connexes