如果超过3，则将td放在不同的行中

时间：2014-12-06 17:47:16

标签： html xml xslt

我做了一个基本的＆＃34;选择你自己的冒险＆＃34;与xml + xslt的游戏。这是目前的样子： screenshot 玩家可以选择的不同答案是灰色区域。 它对我来说看起来很好，只有我希望答案出现在不同的行上，如果需要的话。比如，如果有超过3个答案。

这是xslt转换后的有关html：

<div id="cadre" style="     height:800px; width:800px;     margin-left :auto;     margin-right :auto;     overflow:hidden;    ">
    <div ID="1" style="stuff">
    <img style="stuff" src="images/sexylama.gif"/>
    <p>Es-tu prête pour une aventure pleine de passion ?</p>
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
          <tr>
                <td style=" padding : 5px;  width:auto; height:100px; text-align:center;  background:#eeeeee;  ">
                <a href="#4" style="stuff">Oui</a></td>

                <td style="padding : 5px; width:auto;   height:100px; text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">Non</a> </td>

                <td style="      padding : 5px;   width:auto;   height:100px;  text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">Jt'en pose des questions ?</a> </td>

                 <td style="      padding : 5px;      width:auto;      height:100px;  text-align:center;  background:#eeeeee;  ">
                <a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">stuff</a> </td>
         </tr>
    </table>
    </div>

   <div ID="2" style="stuff">
    <img style="stuff" src="images/somethingelse.gif"/>
    <p>Here is another question</p>
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
          <tr>
                <td style=" padding : 5px;  width:auto; height:100px; text-align:center;  background:#eeeeee;  ">
                <a href="#4" style="stuff">yes</a></td>

                <td style="padding : 5px; width:auto;   height:100px; text-align:center;  background:#eeeeee; ">
                <a href="#2" style="stuff">No</a> </td>
         </tr>
    </table>
    </div>

   ....

当前问题和当前答案的性感骆驼是唯一显示的东西。事实上，如果你可以滚动，其他问题/答案/美洲驼都存在，但它们隐藏在固定高度+溢出：隐藏

xml看起来像这样：

<gameofdoom>

<etape ID="1">
    <texte>Es-tu prête pour une aventure pleine de passion ?</texte>
    <image>images/sexylama.gif</image>
    <choix cible="4">Oui</choix>
    <choix cible="2">Non</choix>
    <choix cible="2">Jt'en pose des questions ?</choix>
    <choix cible="2">T'as pas peur de péter ta mise en page pourrie en mettant des choix trop longs ?</choix>
</etape>


<etape ID="2">
    <texte>Préférez-vous celle des trois minces grands échalas ?</texte>
    <choix cible="16">Oui</choix>
    <choix cible="3">Non</choix>
</etape>

...

</gameofdoom>

在这里你得到了主要部分，xslt表：

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

<xsl:template match="/gameofdoom">
    <html>
        <head>
            <meta charset="UTF-8"/>
            <link rel="stylesheet" href="rien.css" type="text/css"/>
            <title>DAT DATIN SIM OF DOOM</title>
        </head>
        <body style="text-align:center;">

            <!-- this deals with showing one "etape" at a time-->
            <div id="cadre" style="
                height:800px; width:800px;
                margin-left :auto;
                margin-right :auto;
                overflow:hidden;
            ">
            <xsl:apply-templates select="etape"/>
            </div>
        </body>
    </html>
</xsl:template>



<xsl:template match="etape">

    <!-- shows the etape-->
    <div ID="{@ID}" style="
        height: 800px;
        margin-bottom:500px;
        padding:30px;
        text-align:center;
    ">

    <!-- image  -->
    <xsl:apply-templates select="image"/>



    <!-- shows the text of the etape -->
    <p><xsl:value-of select="texte"/></p>

    <!-- table for showing different answer choices next to another -->
    <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
        <tr>
            <xsl:for-each select="choix">

                <!-- one choice answer -->
                <td style="
                    padding : 5px;
                    width:auto;
                    height:100px;
                    text-align:center;
                    background:#eeeeee;
                ">
                <xsl:apply-templates select="."/>
                </td>
            </xsl:for-each>
        </tr>
    </table>
    </div>


</xsl:template><!--/etape-->


<xsl:template match="choix">
    <a href="#{@cible}" style="text-decoration:none;color:black;font-size:1.2em;">
        <xsl:value-of select="."/>
    </a><xsl:text> </xsl:text>
</xsl:template>


<xsl:template match="image">
    <img style="margin-left:auto;margin-right:auto;width:300px;margin-top:30px;" src="{.}"></img>
</xsl:template>

</xsl:stylesheet>

对于所有法语代码，我很抱歉，如果需要，我会翻译任何内容。

感谢大家的宝贵时间！

1 个答案:

答案 0 :(得分：0)

一种不会改变原始样式表大部分内容的方法是为choix添加模板模板，并在有＆gt;时应用该模板。 3 choix。

示例...

XML输入 

<gameofdoom>

    <etape ID="1">
        <texte>Es-tu prête pour une aventure pleine de passion ?</texte>
        <image>images/sexylama.gif</image>
        <choix cible="4">Oui</choix>
        <choix cible="2">Non</choix>
        <choix cible="2">Jt'en pose des questions ?</choix>
        <choix cible="2">T'as pas peur de péter ta mise en page pourrie en mettant des choix trop longs ?</choix>
    </etape>

    <etape ID="2">
        <texte>Préférez-vous celle des trois minces grands échalas ?</texte>
        <choix cible="16">Oui</choix>
        <choix cible="3">Non</choix>
    </etape>

</gameofdoom>

XSLT 1.0 

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

    <xsl:template match="/gameofdoom">
        <html>
            <head>
                <meta charset="UTF-8"/>
                <link rel="stylesheet" href="rien.css" type="text/css"/>
                <title>DAT DATIN SIM OF DOOM</title>
            </head>
            <body style="text-align:center;">

                <!-- this deals with showing one "etape" at a time-->
                <div id="cadre" style="
                    height:800px; width:800px;
                    margin-left :auto;
                    margin-right :auto;
                    overflow:hidden;
                    ">
                    <xsl:apply-templates select="etape"/>
                </div>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="etape">

        <!-- shows the etape-->
        <div ID="{@ID}" style="
            height: 800px;
            margin-bottom:500px;
            padding:30px;
            text-align:center;
            ">

            <!-- image  -->
            <xsl:apply-templates select="image"/>

            <!-- shows the text of the etape -->
            <p><xsl:value-of select="texte"/></p>

            <!-- table for showing different answer choices next to another -->
            <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
                <xsl:choose>
                    <xsl:when test="count(choix)>3">
                        <xsl:apply-templates select="choix" mode="sepRow"/>
                    </xsl:when>
                    <xsl:otherwise>
                        <tr>
                            <xsl:apply-templates select="choix"/>
                        </tr>
                    </xsl:otherwise>
                </xsl:choose>
                <tr>
                </tr>
            </table>
        </div>
    </xsl:template><!--/etape-->

    <xsl:template match="choix" mode="sepRow">
        <tr>
            <xsl:apply-templates select="."/>
        </tr>
    </xsl:template>

    <xsl:template match="choix">
            <td style="
                padding : 5px;
                width:auto;
                height:100px;
                text-align:center;
                background:#eeeeee;
                ">
                <a href="#{@cible}" style="text-decoration:none;color:black;font-size:1.2em;">
                    <xsl:value-of select="."/>
                </a>
            </td>
    </xsl:template>

    <xsl:template match="image">
        <img style="margin-left:auto;margin-right:auto;width:300px;margin-top:30px;" src="{.}"></img>
    </xsl:template>

</xsl:stylesheet>

<强>输出 

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="UTF-8"/>
      <link rel="stylesheet" href="rien.css" type="text/css"/>
      <title>DAT DATIN SIM OF DOOM</title>
   </head>
   <body style="text-align:center;">
      <div id="cadre" style="                     height:800px; width:800px;                     margin-left :auto;                     margin-right :auto;                     overflow:hidden;                     ">
         <div ID="1" style="             height: 800px;             margin-bottom:500px;             padding:30px;             text-align:center;             ">
            <img style="margin-left:auto;margin-right:auto;width:300px;margin-top:30px;" src="images/sexylama.gif"/>
            <p>Es-tu prête pour une aventure pleine de passion ?</p>
            <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
               <tr>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#4" style="text-decoration:none;color:black;font-size:1.2em;">Oui</a>
                  </td>
               </tr>
               <tr>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">Non</a>
                  </td>
               </tr>
               <tr>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">Jt'en pose des questions ?</a>
                  </td>
               </tr>
               <tr>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#2" style="text-decoration:none;color:black;font-size:1.2em;">T'as pas peur de péter ta mise en page pourrie en mettant des choix trop longs ?</a>
                  </td>
               </tr>
               <tr/>
            </table>
         </div>
         <div ID="2" style="             height: 800px;             margin-bottom:500px;             padding:30px;             text-align:center;             ">
            <p>Préférez-vous celle des trois minces grands échalas ?</p>
            <table style="margin-left:auto;margin-right:auto;width:500px;margin-top:40px;">
               <tr>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#16" style="text-decoration:none;color:black;font-size:1.2em;">Oui</a>
                  </td>
                  <td style="                 padding : 5px;                 width:auto;                 height:100px;                 text-align:center;                 background:#eeeeee;                 ">
                     <a href="#3" style="text-decoration:none;color:black;font-size:1.2em;">Non</a>
                  </td>
               </tr>
               <tr/>
            </table>
         </div>
      </div>
   </body>
</html>
相关问题
最新问题