css - 从简单的XML文件到CSS的XSL转换为XForms

我正在将一些简单的XML文档转换为XForms，并且试图为最终结果添加一些样式。我正在使用XSLTForms实现，并且指向本地CSS文件（Twitter的引导程序）。因此，XML文件如下所示：

<structure>
    <part class="Container" id="container">
        <part class="Button" id="b1"/>
    </part>
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
</style>

我的XSLT将这些部分转换为XForms文档：

<xsl:key name="buttonLabels" match="property[@name='label']" use="@part-name"/>
<xsl:template match="part[@class='Button']"><!-- [key('buttonActions', @id)]-->
    <xsl:element name="xf:trigger">
        <xsl:attribute name="id">
            <xsl:value-of select="@id | @size | @style"/>
        </xsl:attribute>
        <xsl:element name="xf:label">
            <xsl:value-of select="key('buttonLabels', @id)"/>
        </xsl:element>
    </xsl:element>
</xsl:template>

<xsl:template match="part[@class='Container']">
    <xsl:element name="div">
        <xsl:attribute name="class">container</xsl:attribute>
        <xsl:apply-templates/>
    </xsl:element>
</xsl:template>

现在，这产生了：（这对于我当前需要的东西来说很好）

<div class="container">
    <xf:trigger id="b1">
       <xf:label>Submit</xf:label>
    </xf:trigger>
</div>

但我想在此<xf:trigger>中添加一些样式规则。问题是，当将其转换为html元素时，其结构为

|_span
  |_span
     |_button
       |_span (for the label)

因此，我不确定如何进行XSLT转换，以便将class="btn-danger"属性插入<button>标记中。

换句话说，我需要在最终的HTML中得到类似的信息：（当前我得到了，但是在class="btn-danger"标记中没有button）

<span id="b1">
    <span>
        <button type="button" class="btn-danger">
            <span id="xsltforms-mainform-label-2_6_2_4_3_" class="xforms-label">Submit</span>
        </button>
    </span>
</span>

此外，我尝试在<xsl:attribute name="class">btn-danger</xsl:attribute>的模板中添加xf:trigger，但这会将属性插入第一个span元素。
有任何想法吗？提前致谢！

更新：

在此链接上可以找到负责将xforms:trigger元素转换为html元素的XSLT-http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/
但是我不想编辑XSLTForms实现，而是想找到一种解决方法，以便可以从XML文件中指定按钮的样式。
例如：

<structure>
    <part class="Container" id="container">
        <part class="Button" id="b1"/>
    </part>
</structure>
<style>
    <property part-name="b1" name="label">Submit</property>
    <property part-name="b1" name="style">btn-danger</property>
</style>

因此，在这里，我要匹配部件名称，并说我希望带有id="b1"的按钮具有btn-danger的css样式规则。但是，如果我还有另一个按钮，但没有样式规则，则它应该具有默认外观。希望很清楚。

最佳答案

您不能将class属性直接添加到XSLTForms生成的按钮元素中。

但是，您可以定义一个CSS规则来代替它，方法如下：

#myclass button {
  color: red;
}

并在触发器中使用该类：

<xf:trigger class="myclass >

每个XForms控件都相同。只需查看浏览器检查器即可查看生成的控件。