イベントとXSLT

-3

は、私は、XML、XSDおよびXSLファイルを書かれている、と私は次の操作を実行する方法を知りたい：イベントとXSLT

ユーザーが特定のリンクをクリックすると、ページが特定の段落を表示します。ユーザーが別のリンクをクリックすると、ページには異なる段落が表示されます。これはどのように可能ですか？ありがとうございました。

編集：

これはコードです。アイデアは、テーブルの問題のCountryNameをクリックすると、その国に関する情報が表示されます。別の情報をクリックするとその情報が表示されます。情報はws：CountryName/ws：Informationになり、テキストと画像が表示されます。

XSL：あなたは、それぞれの国にリンク表示/非表示のテキストを持つことを望むように

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
       xmlns:ws="http://www.w3schools.com" 
       version="1.0"> 

<xsl:template match="/"> 
<html> 
<body> 
<table border="1"> 
<tr bgcolor="red"><th>Country</th></tr> 

<xsl:for-each select="ws:Categorie/ws:Countries/ws:Country"> 
     <tr><td><xsl:value-of select="ws:CountryName"/></td></tr> 
</xsl:for-each> 

</table> 
</body> 
</html> 
</xsl:template> 

</xsl:stylesheet>

出典

2012-04-21 John

XML、XSD、およびXSLは、主にユーザー操作とは関係ありません。ですから、環境と文脈についてさらに詳しい情報を提供してください。あなたは「ページ」とは何ですか？ –

ok私は情報を追加しました、私はそれがより理解できるように願っています – John

が鳴ります。これを行う最善の方法は、国の値へのリンクを追加することです。クリックすると、非表示/表示を切り替えるjavascriptが実行されます。例えば
：

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:ws="http://www.w3schools.com" 
    version="1.0"> 
    <xsl:template match="/"> 
     <html> 
      <head> 
       <title>Trial country links</title> 
       <script> 
        function hideShow(country){ 
         if(document.getElementById(country).style.display == 'none'){ 
          document.getElementById(country).style.display = 'block'; 
         } else { 
          document.getElementById(country).style.display = 'none'; 
         } 
        } 
       </script> 
      </head> 
      <body> 
       <table border="1"> 
        <tr bgcolor="red"> 
         <th>Country</th> 
         <th>Information</th> 
        </tr> 
        <xsl:for-each select="//ws:Categorie/ws:Countries/ws:Country"> 
         <tr> 
          <td> 
           <xsl:element name="a"> 
            <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="ws:CountryName"/>')</xsl:attribute> 
            <xsl:value-of select="ws:CountryName"/> 
           </xsl:element> 
          </td> 
          <td> 
           <xsl:element name="div"> 
            <xsl:attribute name="id"><xsl:value-of select="ws:CountryName"/></xsl:attribute> 
            <xsl:attribute name="style">display:none;</xsl:attribute> 
            <xsl:value-of select="ws:Information"/> 
           </xsl:element> 
          </td> 
         </tr> 
        </xsl:for-each> 
       </table> 
      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

次の入力XMLに適用

<?xml version="1.0" encoding="UTF-8"?> 
<ws:Categorie xmlns:ws="http://www.w3schools.com"> 
    <ws:Countries> 
     <ws:Country> 
      <ws:CountryName>Birma</ws:CountryName> 
      <ws:Information>Birma blabla</ws:Information> 
     </ws:Country> 
     <ws:Country> 
      <ws:CountryName>India</ws:CountryName> 
      <ws:Information>India blabla</ws:Information> 
     </ws:Country> 
     <ws:Country> 
      <ws:CountryName>Boerkina Faso</ws:CountryName> 
      <ws:Information>Boerkina Faso blabla</ws:Information> 
     </ws:Country> 
     <ws:Country> 
      <ws:CountryName>Namibia</ws:CountryName> 
      <ws:Information>Namibia blabla</ws:Information> 
     </ws:Country> 
    </ws:Countries> 
</ws:Categorie>

これもSaxon-CEのように、イベントをサポートするXSLTの純粋なJSの実装があります

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Trial country links</title> 
     <script> 
        function hideShow(country){ 
         if(document.getElementById(country).style.display == 'none'){ 
          document.getElementById(country).style.display = 'block'; 
         } else { 
          document.getElementById(country).style.display = 'none'; 
         } 
        } 
       </script> 
    </head> 
    <body> 
     <table border="1"> 
      <tr bgcolor="red"> 
       <th>Country</th> 
       <th>Information</th> 
      </tr> 
      <tr> 
       <td><a href="javascript:hideShow('Birma')">Birma</a></td> 
       <td> 
        <div id="Birma" style="display:none;">Birma blabla</div> 
       </td> 
      </tr> 
      <tr> 
       <td><a href="javascript:hideShow('India')">India</a></td> 
       <td> 
        <div id="India" style="display:none;">India blabla</div> 
       </td> 
      </tr> 
      <tr> 
       <td><a href="javascript:hideShow('Boerkina Faso')">Boerkina Faso</a></td> 
       <td> 
        <div id="Boerkina Faso" style="display:none;">Boerkina Faso blabla</div> 
       </td> 
      </tr> 
      <tr> 
       <td><a href="javascript:hideShow('Namibia')">Namibia</a></td> 
       <td> 
        <div id="Namibia" style="display:none;">Namibia blabla</div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

出典

2012-04-22 10:59:37 Maestro13

できます。彼らに試してみたいかもしれません。実際には、自分自身のdocumentationが実装されており、達成しようとしていることを正確に実行しているので、それを勉強したいかもしれません。

出典

2014-03-30 07:05:31 DanMan

答えて

関連する問題