4

事前のお詫び-ここではまったくの初心者であり、ここにあるほとんどすべてのXSLTスレッドを読んだ後は苦労しています。だから私は必死にいくつかのアスピリンとあなたの指導が必要です！

xsltバージョン1.0を使用して処理する必要がある3つの入力パラメーター/変数があります。

<!-- Variables in the XSL -->
<xsl:variable name="tw">125</xsl:variable>
<xsl:variable name="rows">4</xsl:variable>
<xsl:variable name="cols">6</xsl:variable>

以下に示すように、HTMLの「 background-positions 」に計算値（ピクセル）を入れたいと思います。-

<div style="background-position:-0px -0px;"><img src="images/thumbs/1.jpg" alt="one" /></div>
<div style="background-position:-125px -0px;"><img src="images/thumbs/2.jpg" alt="two" /></div>
<div style="background-position:-250px -0px;"><img src="images/thumbs/3.jpg" alt="three" /></div>
<div style="background-position:-375px -0px;"><img src="images/thumbs/4.jpg" alt="four" /></div>
<div style="background-position:-500px -0px;"><img src="images/thumbs/5.jpg" alt="five" /></div>
<div style="background-position:-625px -0px;"><img src="images/thumbs/6.jpg" alt="six" /></div>

<div style="background-position:-0px -125px;"><img src="images/thumbs/7.jpg" alt="seven" /></div>
<div style="background-position:-125px -125px;"><img src="images/thumbs/8.jpg" alt="eight" /></div>
<div style="background-position:-250px -125px;"><img src="images/thumbs/9.jpg" alt="nine" /></div>
<div style="background-position:-375px -125px;"><img src="images/thumbs/10.jpg" alt="ten" /></div>
<div style="background-position:-500px -125px;"><img src="images/thumbs/11.jpg" alt="11" /></div>
<div style="background-position:-625px -125px;"><img src="MIB/images/thumbs/12.jpg" alt="12" /></div>

<div style="background-position:-0px -250px;"><img src="images/thumbs/13.jpg" alt="13" /></div>
<div style="background-position:-125px -250px;"><img src="/mages/thumbs/14.jpg" alt="14" /></div>
<div style="background-position:-250px -250px;"><img src="images/thumbs/15.jpg" alt="15" /></div>
<div style="background-position:-375px -250px;"><img src="images/thumbs/16.jpg" alt="16" /></div>
<div style="background-position:-500px -250px;"><img src="images/thumbs/17.jpg" alt="17" /></div>
<div style="background-position:-625px -250px;"><img src="images/thumbs/18.jpg" alt="18" /></div>

<div style="background-position:-0px -375px;"><img src="images/thumbs/19.jpg" alt="19" /></div>
<div style="background-position:-125px -375px;"><img src="images/thumbs/20.jpg" alt="20" /></div>
<div style="background-position:-250px -375px;"><img src="images/thumbs/21.jpg" alt="21" /></div>
<div style="background-position:-375px -375px;"><img src="images/thumbs/22.jpg" alt="22" /></div>
<div style="background-position:-500px -375px;"><img src="images/thumbs/23.jpg" alt="23" /></div>
<div style="background-position:-625px -375px;"><img src="images/thumbs/24.jpg" alt="24" /></div>

私は（どういうわけか）ループしてカウントを維持する必要があることを認識し（どういうわけか）、ループとカウントの例をたくさん見たので、プロセスは簡単だと思っていましたが、それから私は頭が回転している他の多くのことについて読みましposition()たnumber。for-eachステートメント内のカウントループをどこにどのように配置するか、またはafor-eachが最善の解決策である場合でも、私にはわかりません。私の微妙な試みはどれも整形式のXSLを生成しなかったので、私がどこにも速く到達していないことがわかります。

ですから、ここにいる教祖の1人が、プロセスを開始し、xsltの理解に役立つことを願っています。

画像データはXMLファイルから取得されており、img srcとaltを問題なく処理できるため、問題となるのはピクセル計算、ループ、カウントなどだけです。

<xsl:for-each select="DATASET/ITEM">
<div style="background-position:-{rowpos}px -{colpos}px;"><img src="{thumbnailimage}" alt="{imagealttext}" /></div>
</xsl:for-each>
<!-- rowpos and colpos are the calculated values that are generated from whatever loop and count process is used -->

したがって、明確にするために：

計算。6つの計算値を生成する3つの変数があります。tw=125。幅は背景位置に使用されるため、行/列に応じて、計算値は例に示すとおりになります。たとえば、tw-tw、tw、tw * 2、tw * 3、tw * 4、およびtw * 5（合計6つの計算のうち）。行数と列数によって、計算されたピクセル値（上記の場合は0px、-125px、-250px、-375px、-500px、-675px）を使用して、各サムネイルを配置する方法と場所が決まります。

計算のさらなる拡張：-行と列の位置は、サムネイル画像の幅によって決定されます。各サムネイルの位置は、行数と列数によって決まります。150px幅の親指を持つ3行3列のグリッドには9つのサムネイルが必要であるため、9セットのpx値が必要ですが、以下に示すように、tw*2とtw*3のように2つの一意の計算のみが必要です。

<div style="background-position: -0px -0px;" /><img src="image 1.jpg" alt="Alt text 1" /></div>
<div style="background-position: -125px -0px;" /><img src="image 2.jpg" alt="Alt text 2" /></div>
<div style="background-position: -250px -0px;" /><img src="image 3.jpg" alt="Alt text 3" /></div>
<div style="background-position: -375px -0px;" /><img src="image 4.jpg" alt="Alt text 4" /></div>
<div style="background-position: -500px -0px;" /><img src="image 5.jpg" alt="Alt text 5" /></div>
<div style="background-position: -0px -125px;" /><img src="image 6.jpg" alt="Alt text 6" /></div>
<div style="background-position: -125px -125px;" /><img src="image 7.jpg" alt="Alt text 7" /></div>
<div style="background-position: -250px -125px;" /><img src="image 8.jpg" alt="Alt text 8" /></div>
<div style="background-position: -375px -125px;" /><img src="image 9.jpg" alt="Alt text 9" /></div>
<div style="background-position: -500px -125px;" /><img src="image 10.jpg" alt="Alt text 10" /></div>
<div style="background-position: -0px -250px;" /><img src="image 11.jpg" alt="Alt text 11" /></div>
<div style="background-position: -125px -250px;" /><img src="image 12.jpg" alt="Alt text 12" /></div>
<div style="background-position: -250px -250px;" /><img src="image 13.jpg" alt="Alt text 13" /></div>
<div style="background-position: -375px -250px;" /><img src="image 14.jpg" alt="Alt text 14" /></div>
<div style="background-position: -500px -250px;" /><img src="image 15.jpg" alt="Alt text 15" /></div>
<div style="background-position: -0px -375px;" /><img src="image 16.jpg" alt="Alt text 16" /></div>
<div style="background-position: -125px -375px;" /><img src="image 17.jpg" alt="Alt text 17" /></div>
<div style="background-position: -250px -375px;" /><img src="image 18.jpg" alt="Alt text 18" /></div>
<div style="background-position: -375px -375px;" /><img src="image 19.jpg" alt="Alt text 19" /></div>
<div style="background-position: -500px -375px;" /><img src="image 20.jpg" alt="Alt text 20" /></div>

XMLファイル画像のsrcとaltテキストはXMLファイルから取得されます：-

<DATASET>
<ITEM>
   <THUMBNAILIMAGE>image1.jpg</THUMBNAILIMAGE>
   <IMAGEALTTEXT>Alt text 1</IMAGEALTTEXT>
</ITEM>
<ITEM>
   <THUMBNAILIMAGE>image2.jpg</THUMBNAILIMAGE>
   <IMAGEALTTEXT>Alt text 2</IMAGEALTTEXT>
</ITEM>
......
<ITEM>
   <THUMBNAILIMAGE>image20.jpg</THUMBNAILIMAGE>
   <IMAGEALTTEXT>Alt text 20</IMAGEALTTEXT>
</ITEM>
</DATASET>
4

3 に答える 3

3

これは、以下のコード（ XSLT 1.0 ）を使用して実現できると思います。次の変換は、すべてのXMLファイルに対応している必要があります。

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

<xsl:output indent="yes" />

<xsl:variable name="TW">125</xsl:variable>
<xsl:variable name="ROWS">4</xsl:variable>
<xsl:variable name="COLS">6</xsl:variable>
<xsl:variable name="TOTAL"><xsl:value-of select="$ROWS * $COLS"/></xsl:variable>

<xsl:template match="/">
    <xsl:call-template name="iterate_rows" />
</xsl:template>

<xsl:template name="iterate_rows">
    <xsl:param name="num">0</xsl:param> 

    <xsl:if test="not($num = $ROWS)">
        <xsl:call-template name="iterate_cols">
            <xsl:with-param name="rows" select="$num"/>
        </xsl:call-template>

        <xsl:call-template name="iterate_rows">
            <xsl:with-param name="num" select="$num + 1"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>

<xsl:template name="iterate_cols">
    <xsl:param name="num">0</xsl:param> 
    <xsl:param name="rows" />

    <xsl:if test="not($num = $COLS)">
        <xsl:element name="div">
            <xsl:attribute name="style" ><xsl:value-of select="concat('background-position:-', $TW*$num, 'px -', $TW*$rows, 'px;')" /></xsl:attribute>

            <xsl:variable name="number" select="$rows*$COLS + $num + 1" />

            <xsl:element name="img">
                <xsl:attribute name="src">
                    <xsl:value-of select="concat('images/thumbs/', $number, '.jpg')"/>
                </xsl:attribute>
                <xsl:attribute name="alt">
                    <xsl:value-of select="$number"/>
                </xsl:attribute>
            </xsl:element>

        </xsl:element>

        <xsl:call-template name="iterate_cols">
            <xsl:with-param name="num" select="$num + 1"/>
            <xsl:with-param name="rows" select="$rows" />
        </xsl:call-template>
    </xsl:if>
</xsl:template>

</xsl:stylesheet>

編集：

XSLTでは、変数の値を変更することは不可能であるため（したがって、カウンターを持つことは不可能であるため）、C++またはJavaのループと同様のループを構築することはできません。ただし、反復を再発に置き換えることは可能です。

私のソリューションでは、繰り返し呼び出される2つのテンプレートを定義しました。最初のテンプレートは。、2番目のテンプレートiterate_rowsはiterate_cols。'プログラム'全体のエントリポイントは次のとおりです。

<xsl:template match="/">
    <xsl:call-template name="iterate_rows" />
</xsl:template>

これは最初に呼び出されます。名前付きテンプレートiterate_rowsには1つのパラメーターnumがあり、デフォルト値は0に設定されています。重要なのは<xsl:if ...>、ループの終わりに到達したかどうかをチェックする条件です（この場合はの値になります$ROWS）。条件ブロック内には2つの呼び出しがあります。1つはiterate_colsテンプレートを実行し、もう1つはiterate_rowsテンプレート自体の呼び出しです（注：増分パラメーターを使用して呼び出すことに注意してくださいnum）。2番目のテンプレートも同様に機能します。お役に立てれば。

于 2012-06-02T14:57:26.313 に答える
1

XSLT 2.0では、これは簡単です。次のようなものです。

<xsl:for-each select="1 to $rows">
  <xsl:variable name="row" select="position()"/>
  <xsl:for-each select="1 to $columns">
     <xsl:variable name="column" select="position()"/>
     <div style="background-position: -{$row*$tw}px -{$column*$tw}px"/>
  </
</

1.0では、の贅沢はありませんselect="1 to $rows"が、一般的な回避策はを使用することselect="(//*)[position() &lt;= $rows]"です。これは、ソースドキュメントに少なくとも$rows要素が含まれている場合に機能します。選択されているノードには実際には関心がなく、ループを実行する回数を決定するノードの数だけに関心があります。

于 2012-06-02T18:03:03.900 に答える
0

これは、完全で、短く、単純な（単一の再帰テンプレートのみ）、再帰的なXSLT1.0変換です。

<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output omit-xml-declaration="yes" indent="yes"/>

     <xsl:param name="pTw" select="125"/>
     <xsl:param name="pNumRows" select="4"/>
     <xsl:param name="pNumCols" select="5"/>

     <xsl:variable name="vImageItems" select="/*/*"/>

     <xsl:template match="/">
      <xsl:call-template name="generateDiv"/>
     </xsl:template>

     <xsl:template name="generateDiv">
      <xsl:param name="pRow" select="1"/>
      <xsl:param name="pCol" select="1"/>

      <xsl:if test="not($pRow > $pNumRows)">
        <xsl:variable name="vImageItem" select=
        "$vImageItems[($pRow -1)*$pNumCols + $pCol]"/>

        <div style="background-position: -{($pCol -1)*$pTw}px -{($pRow -1)*$pTw}px;">
          <img src="{$vImageItem/THUMBNAILIMAGE}"
               alt="{$vImageItem/IMAGEALTTEXT}" />
        </div>

        <xsl:variable name="vnewCol">
         <xsl:choose>
          <xsl:when test="$pCol = $pNumCols">1</xsl:when>
          <xsl:otherwise><xsl:value-of select="$pCol+1"/></xsl:otherwise>
         </xsl:choose>
        </xsl:variable>

        <xsl:variable name="vnewRow">
          <xsl:choose>
            <xsl:when test="$vnewCol = 1"><xsl:value-of select="$pRow+1"/></xsl:when>
            <xsl:otherwise><xsl:value-of select="$pRow"/></xsl:otherwise>
          </xsl:choose>
        </xsl:variable>

        <xsl:call-template name="generateDiv">
         <xsl:with-param name="pRow" select="$vnewRow"/>
         <xsl:with-param name="pCol" select="$vnewCol"/>
        </xsl:call-template>
      </xsl:if>
     </xsl:template>
</xsl:stylesheet>

この変換が提供されたXMLドキュメントに適用される場合：

<DATASET>
    <ITEM>
        <THUMBNAILIMAGE>image1.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 1</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image2.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 2</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image3.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 3</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image4.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 4</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image5.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 5</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image6.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 6</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image7.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 7</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image8.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 8</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image9.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 9</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image10.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 10</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image11.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 11</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image12.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 12</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image13.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 13</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image14.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 14</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image15.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 15</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image16.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 16</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image17.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 17</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image18.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 18</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image19.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 19</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image20.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 20</IMAGEALTTEXT>
    </ITEM>
</DATASET>

必要な正しい結果が生成されます。

<div style="background-position: -0px -0px;">
   <img src="image1.jpg" alt="Alt text 1"/>
</div>
<div style="background-position: -125px -0px;">
   <img src="image2.jpg" alt="Alt text 2"/>
</div>
<div style="background-position: -250px -0px;">
   <img src="image3.jpg" alt="Alt text 3"/>
</div>
<div style="background-position: -375px -0px;">
   <img src="image4.jpg" alt="Alt text 4"/>
</div>
<div style="background-position: -500px -0px;">
   <img src="image5.jpg" alt="Alt text 5"/>
</div>
<div style="background-position: -0px -125px;">
   <img src="image6.jpg" alt="Alt text 6"/>
</div>
<div style="background-position: -125px -125px;">
   <img src="image7.jpg" alt="Alt text 7"/>
</div>
<div style="background-position: -250px -125px;">
   <img src="image8.jpg" alt="Alt text 8"/>
</div>
<div style="background-position: -375px -125px;">
   <img src="image9.jpg" alt="Alt text 9"/>
</div>
<div style="background-position: -500px -125px;">
   <img src="image10.jpg" alt="Alt text 10"/>
</div>
<div style="background-position: -0px -250px;">
   <img src="image11.jpg" alt="Alt text 11"/>
</div>
<div style="background-position: -125px -250px;">
   <img src="image12.jpg" alt="Alt text 12"/>
</div>
<div style="background-position: -250px -250px;">
   <img src="image13.jpg" alt="Alt text 13"/>
</div>
<div style="background-position: -375px -250px;">
   <img src="image14.jpg" alt="Alt text 14"/>
</div>
<div style="background-position: -500px -250px;">
   <img src="image15.jpg" alt="Alt text 15"/>
</div>
<div style="background-position: -0px -375px;">
   <img src="image16.jpg" alt="Alt text 16"/>
</div>
<div style="background-position: -125px -375px;">
   <img src="image17.jpg" alt="Alt text 17"/>
</div>
<div style="background-position: -250px -375px;">
   <img src="image18.jpg" alt="Alt text 18"/>
</div>
<div style="background-position: -375px -375px;">
   <img src="image19.jpg" alt="Alt text 19"/>
</div>
<div style="background-position: -500px -375px;">
   <img src="image20.jpg" alt="Alt text 20"/>
</div>

説明：

  1. これは再帰的なソリューションです。反復回数が（ソースXMLドキュメントおよびXSLTスタイルシートで）使用可能なノードの総数を超えないことが保証されている場合は、非再帰的なソリューション（別名Piezメソッド）が可能です。

  2. 停止条件：現在の行番号の値が、パラメーターで指定された行数（$pRow > $pNumRows）より大きくなります。

  3. アクション：必要な新しいdiv要素を生成してから、次のアクションを実行するための列番号と行番号の値を取得します。

于 2012-06-02T20:10:27.783 に答える