0

xslt変換を使用してxmlファイルを読み取り、コンテンツを別のdivに配置しようとしています。一部のソリューションでは、このコンテンツがローカルで実行され（CDから直接）、クライアントの仕様に従ってIEで動作する必要があるサーバー側の言語を使用できないという制限があります（理由はわかりますか？）

基本的に、レッスンを「レッスン」divにロードするonClick関数を使用して、すべてのフェーズを「フェーズ」divに配置したいと思います。

以下のコードの一部は疑似であり、事前の支援のおかげで機能しません。

XMLファイル

    <?xml version="1.0" encoding="utf-8"?>
        <menu frame="UH1Y" curriculum="Crew Chief Training ICW">
          <phase name='Unit 01'>
             <lesson link='lesson01/menu.htm'>lesson 01</lesson>
             <lesson link='lesson02/menu.htm'>lesson 02</lesson>
             <lesson link='lesson03/menu.htm'>lesson 03</lesson>
             <lesson link='lesson04/menu.htm'>lesson 04</lesson>
             <lesson link='lesson0/menu.htm'>lesson 05</lesson>
          </phase>
      <phase name='Unit 02'>
        <lesson link='lesson01/menu.htm'>lesson 01</lesson>
        <lesson link='lesson02/menu.htm'>lesson 02</lesson>
        <lesson link='lesson03/menu.htm'>lesson 03</lesson>
      </phase>
    </menu>

XSLファイル

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>menu</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts/menu.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="container2">
      <div id="phase">
        <ul>
          <xsl:for-each select="menu/phase">
            <li  onclick='loadLesson(<xsl:value-of select="menu/phase/@name[current()]"/>);'> 
            <xsl:value-of select="@name"/></li>
          </xsl:for-each>
        </ul>
      </div>
      <div id="lesson2">
        <ul>
          <xsl:for-each select="menu/phase[position() = {*the current phase*]/lesson">
            <li><xsl:value-of select="."/></li>
          </xsl:for-each>
        </ul>
      </div>
    </div>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

JSファイル

function loadLesson(x) {
    alert(x);
    //<xsl:value-of select="menu/phase/@name[current()]"/>
    theDiv=document.getElementById('lesson2')
    theDiv.innerHTML = x;

}
4

1 に答える 1

0

ユーザーがリンクをクリックするたびに別のXSLT変換を行うのではなく、最初にページ上のすべての可能なdivをレンダリングし、それらをすべて非表示にする（CSS表示プロパティを使用）価値があるかもしれません。次に、「フェーズ」を選択すると、関連するdivが表示されます。

XSLTの最初の問題はこれです

 <li onclick='loadLesson(<xsl:value-of select="menu/phase/@name[current()]"/>);'>

このような属性にXSLT要素を埋め込むことは無効です。この場合、実際には「属性値テンプレート」を使用する必要があります。また、すでにフェーズ要素に配置されているため、ここにフルパスを記述する必要はありません。 @nameだけで十分です。

 <li onclick="loadLesson('{@name}');'>

ここで中括弧に注意してください。これは属性値テンプレートを示しており、中括弧の内容は文字通り出力されるのではなく評価されます。

実際には、フェーズごとに個別のdivを使用するため、そのようなdivごとに一意のIDが必要になり、スペースが含まれないため、これを行う方がよい場合があります。

<li onclick="loadLesson('phase_{generate-id()}');">

次に、各フェーズのレッスンをレンダリングするために、これを行うことができます

  <xsl:for-each select="menu/phase">
  <div id="phase_{generate-id()}" style="display:none">
    <ul>
      <xsl:for-each select="lesson">
        <li><xsl:value-of select="."/></li>
      </xsl:for-each>
    </ul>
  </div>
  </xsl:for-each>

ここでも、属性値テンプレートを使用してdivのIDを設定していることに注意してください。

次に、最後に、JavaScript関数loadLessonを次のように記述します。

var current_div = null;
function loadLesson(divId)
{
   if (current_div != null) current_div.style.display = 'none';

   current_div = document.getElementById(divId);
   current_div.style.display = 'block';
}

この場合の完全なXSLTは次のとおりです。

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>menu</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts/menu.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="container2">
      <div id="phase">
        <ul>
          <xsl:for-each select="menu/phase">
            <li onclick="loadLesson('phase_{generate-id()}');"> 
               <xsl:value-of select="@name"/>
            </li>
          </xsl:for-each>
        </ul>
      </div>
      <xsl:for-each select="menu/phase">
      <div id="phase_{generate-id()}" style="display:none">
        <ul>
          <xsl:for-each select="lesson">
            <li><xsl:value-of select="."/></li>
          </xsl:for-each>
        </ul>
      </div>
      </xsl:for-each>
    </div>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
于 2013-03-12T08:42:22.447 に答える