css - 从简单的 XML 文件到 XForms 的 XSL 转换和应用 CSS

Question

我正在将一些简单的 XML 文档转换为 XForms，并试图为最终结果添加一些样式。我正在使用 XSLTForms 实现，我指向一个本地 CSS 文件(Twitter 的 Bootstrap )。所以 XML 文件看起来像这样:

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

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

<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 的 XSLT元素到 html 元素可以在此链接上找到 - 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 样式规则例如。但是如果我有另一个按钮并且没有样式规则，它应该具有默认外观。希望这很清楚。

Answer 1

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

但是您可以定义一个适用于它的 CSS 规则，而不是它:

#myclass button {
  color: red;
}

并在触发器中使用类:

<xf:trigger class="myclass >

对于每个 XForms 控件都是一样的。只需查看浏览器检查器即可查看生成的控件。