XForms/條件樣式
外觀
< XForms
您有一個專案列表,您想在重複迴圈內顯示這些專案。您希望某些專案根據其內容進行不同的樣式設定。
我們將使用 XForms 的 group 元素在重複語句中條件顯示一個專案。
假設您的表單在例項中具有以下資料
<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' 的元素在輸出中將沒有該屬性。
在此示例中,我們需要顯示特定術語的同義詞列表。所有同義詞都列出,首選術語以粗體顯示。
<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 可以有條件地使用它來顯示元素。