跳转到内容

XForms/条件样式

来自维基教科书,开放的书籍,开放的世界

您有一个项目列表,您想在重复循环内显示这些项目。您希望某些项目根据其内容进行不同的样式设置。

我们将使用 XForms 的 group 元素在重复语句中条件显示一个项目。

示例 XML 片段

[编辑 | 编辑源代码]

假设您的表单在实例中具有以下数据

<my-nodes>
   <my-node>
      <element1>true</element1>
      <element2>Element2 Value</element2>
   </my-node>
   <my-node>
      <element1>false</element1>
      <element2>Element2 Value</element2>
   </my-node>
   <my-node>
      <element1>true</element1>
      <element2>Element2 Value</element2>
   </my-node>
</my-nodes>

项目的条件显示

[编辑 | 编辑源代码]

element1 的值为 true 时,以下文本将仅输出 element2

<xf:repeat nodeset="//my-node">
   <xf:group ref=".[element1='true']">
      <xf:output ref="element2"/>
   </xf:group>
</xf:repeat>

语法 .[a='b'] 表示从当前节点开始,如果元素 a 等于值 b,则输出组内的元素。

项目的条件格式化

[编辑 | 编辑源代码]

相同的策略可用于将输出包含在不同的 div 或 span 元素中。

<xf:repeat nodeset="my-node">
   <xf:group ref=".[element1='true']">
      <xf:output ref="element2" class="strong"/>
   </xf:group>
   <xf:group ref=".[element1='false']">
      <xf:output ref="element2"/>
   </xf:group>
</xf:repeat>

在上面的示例中,所有具有 element1='true' 的节点将在输出中具有 class="strong" 属性,而任何具有 element1='false' 的元素在输出中将没有该属性。

示例 XForms 应用程序

[编辑 | 编辑源代码]

加载 XForms 应用程序

源代码

[编辑 | 编辑源代码]

在此示例中,我们需要显示特定术语的同义词列表。所有同义词都列出,首选术语以粗体显示。

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ev="http://www.w3.org/2001/xml-events"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
       <title>Conditional Display</title>
       <style type="text/css">
          @namespace xf url("http://www.w3.org/2002/xforms");
          body {font-family:Helvetica, sans-serif}
          .strong {font-weight:bold;}
          /* this puts everything under the repeat element into a single line */
          xf|repeat * {display:inline;}
       </style>
       <xf:model>
          <xf:instance xmlns="" id="current-synset">
            <data>
               <synset-id>3</synset-id>
               <synonym>
                   <preferred>false</preferred>
                   <syn-name>Boolean-Value</syn-name>
               </synonym>
                <synonym>
                   <preferred>false</preferred>
                   <syn-name>Conditional-Value</syn-name>
               </synonym>
               <synonym>
                   <preferred>false</preferred>
                   <syn-name>Flag</syn-name>
               </synonym>
                <synonym>
                   <preferred>true</preferred>
                   <syn-name>Indicator</syn-name>
               </synonym>
                <synonym>
                   <preferred>false</preferred>
                   <syn-name>Yes/No-Value</syn-name>
               </synonym>
            </data>
          </xf:instance>
       </xf:model>
    </head>
    <body>
       <h3>Synonym Set</h3>
       <span>(preferred term is bold)</span><br/>
       <xf:label>Synonyms: </xf:label>
          <xf:repeat nodeset="instance('current-synset')/synonym" id="repeat">
             <xf:group ref=".[preferred='true']">
                <xf:output ref="syn-name" class="strong"/>
             </xf:group>
              <xf:group ref=".[preferred='false']">
                <xf:output ref="syn-name"/>
             </xf:group>  
          </xf:repeat>
    </body>
</html>

XForms 1.1 还包括 if 属性。某些 XForms 可以有条件地使用它来显示元素。


下一页: 格式化数字 | 上一页: 重复
主页: XForms
华夏公益教科书