XForms/折叠菜单
< XForms
您想在一个树状结构中显示一个复杂的选项列表，其中每个分支都可以打开和关闭。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>Folding Menus</title>
<xf:model id="modelID" ev:event="" functions="" schema="">
<xf:instance id="instanceData" xmlns="">
<group id="mainGroup">
<group id="group1" fold="0" category="Category One">
<item id="item1">Enter Data</item>
<item id="item2">Enter Data</item>
<item id="item3">Enter Data</item>
<group id="group2" fold="0" category="Category Two">
<item id="item4">Enter Data</item>
<item id="item5">Enter Data</item>
<group id="group3" fold="0" category="Category Three">
<item id="item6">Enter Data</item>
<item id="item7">Enter Data</item>
<item id="item8">Enter Data</item>
</group>
<item id="item9">Enter Data</item>
</group>
</group>
</group>
</xf:instance>
<xf:instance id="foldedNodes" xmlns="">
<foldednodes>
<nodelist />
</foldednodes>
</xf:instance>
<xf:bind nodeset="descendant::*"
relevant="not(contains(instance('foldedNodes')/nodelist, current()/parent::*/@id))"
/>
</xf:model>
<style type="text/css">
@namespace xhtml url("http://www.w3.org/1999/xhtml");
@namespace xf url("http://www.w3.org/2002/xforms");
xf|*:disabled {
display: none;
}
</style>
</head>
<body>
<div class="header">Folding Test</div>
<xf:group id="mainGroup">
<xf:output ref="instance('foldedNodes')/nodelist">
<xf:label>ID List</xf:label>
</xf:output>
<xf:repeat nodeset="instance('instanceData')/descendant::group" id="repeatGroup">
<xf:output class="outputInline"
value="concat(substring('                                                          ',1,3 * count(current()/ancestor::*)), '     ')" />
<xf:trigger>
<xf:label>
<xf:output
value="if(contains(instance('foldedNodes')/nodelist, ./@id), '+', '-')"
/>
</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('foldedNodes')/nodelist"
value="if(contains(instance('foldedNodes')/nodelist, instance('instanceData')/descendant::group[position()=index('repeatGroup')]/@id), concat(substring-before(instance('foldedNodes')/nodelist, instance('instanceData')/descendant::group[position()=index('repeatGroup')]/@id), substring-after(instance('foldedNodes')/nodelist, instance('instanceData')/descendant::group[position()=index('repeatGroup')]/@id)), concat(instance('foldedNodes')/nodelist, instance('instanceData')/descendant::group[position()=index('repeatGroup')]/@id))"
/>
</xf:action>
</xf:trigger>
<xf:output class="outputInline" ref="./@category" />
<xf:repeat nodeset="./item" id="repeatItem">
<xf:output class="outputInline"
value="concat(substring('                                                          ',1,3 * count(current()/ancestor::*)), '     ')" />
<xf:output class="outputInline" ref="./@id">
<xf:label>id: </xf:label>
</xf:output>
<xf:input class="inputInline" ref=".[name() = 'item' or name() = 'file']">
<xf:label>data: </xf:label>
</xf:input>
</xf:repeat>
</xf:repeat>
</xf:group>
</body>
</html>
在这个例子中有一些有趣的 XPath 表达式。例如，以下代码计算当前节点的祖先节点数量
count(current()/ancestor::*)
以下代码获取实例数据中所有后代组
instance('instanceData')/descendant::group
以下代码如果节点列表包含 id 属性中的值，则返回“+”，否则返回“-”。
if(contains(instance('foldedNodes')/nodelist, ./@id), '+', '-')
感谢 Fraser 在 2007 年 10 月将此内容发布到 Mozilla XForms 开发者新闻组。