ＸＳＬの書き方（その４） －動的に表示を変更－

　

１　タイトルをクリックして本文の表示を変更する。

　　左側のタイトルをクリックすると，それに応じて右側の本文の表示を変更する。

　　まずは，サンプルを見てみよう。左側のタイトルがリンクになっている。
　　クリックすると，右側の表示が変更する。

　　
　　htmlは前回と同じものを使う。
　　
　　hidari.xslを次のように変更する。

  <xsl:template match="/">
    <xsl:apply-templates />
  </xsl:template>

  <xsl:template match="data/bunsho">
    <xsl:variable name="num" select="@bango"/>
      <a href="#" onclick="test({$num})">
        <xsl:value-of select="title"/>
      </a><br/>
  </xsl:template>

　　<xsl:variable name="num" select="@bango"> が変数の宣言。
　　これは，numという名前の変数(variable)を宣言し，numに属性@bangoの値を代入している。
　　
　　今回のデータでは，bangoはbunshoによって１，２となる。
　　そうして，numに代入された数は，onclick="test({$num})"で使われている。
　　
　　このxslを実行すると，次のようなhtmlができる。

　　　<a href="#" onclick="test(1)">ＸＭＬ入門１</a><br/>
　　　<a href="#" onclick="test(2)">ＸＭＬ入門２</a><br/>
　　
　　リンクになっていて，クリックするとtest(1)やtest(2)のfunctionが実行される。

　　migi.xslを次のように変更する。

  <xsl:param name="jump"/>
  
  <xsl:template match="/">
    <xsl:apply-templates select="data/bunsho[@bango=$jump]/honbun"/>
  </xsl:template>

  <xsl:template match="honbun">
    <xsl:apply-templates select="ln"/>
  </xsl:template>
　　
  <xsl:template match="ln">
    <xsl:value-of select="."/><br/>
  </xsl:template>

　　<xsl:param name="jump"/>も変数の宣言だが，これは外部からの値を受け取る変数だ。
　　xslprocessor.js内のプログラムで，xslに値を渡す変数として"jump"を定義している。
　　このjumpの値を受け取る。
　　[@bango=$jump]の$jumpの値がhtmlから渡されて，表示する文書を選択する。

　　一方，htmlの xslproc('test2.xml','migi2.xsl','kiji2',jmp); のjmpの値がxslのjumpに
　　渡されるが，このjmpは，test(jmp)から値を渡される。
　　よって，onclick="test(1)"などで，表示が変更される。
　　　　
　　注意：<xsl:param name="jump"/>は，xslの先頭（宣言部の直後）におかなければならない。
　　
　　param は，テンプレートにパラメータを渡すときにも使える。
    下の例では，honbunテンプレートのjumpに100を渡している。
    

  <xsl:template match="/">
    <xsl:apply-templates>
      <xsl:with-param name="jump" select="100"/>
    </xsl:apply-templates>
  </xsl:template>

  <xsl:template match="honbun">
    <xsl:param name="jump" select="5"/>
    <xsl:value-of select="$jump"/>
  </xsl:template>
　　

　 [  xsl:param と xsl:variableの使い方  ]

　宣言した変数を使うには，$hensu と名前の頭に$をつける。
　xsl文の中では，そのまま使える。<xsl:if test="@bango=$jump">
　xsl内のhtmlタグでは{}でくくる。<div id="{$jump}">

　xslの変数は通常のプログラムの変数と異なり，限定した使い方しかできない。
　自由に変数に値を代入することはできない。
　
　ノードを指定するとき変数が使えると便利だが，これはできない。
　　　xsl:apply-templates select="data/$jump"
　このような場合は，属性で判断できるようにデータ構造を考える
　　　xsl:apply-templates select="data/kiji[@idx=$jump]"