跳轉到內容

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
華夏公益教科書