使用绑定突出显示 XForms/水平文件选项卡菜单
< XForms
这是水平文件选项卡菜单的另一种方法。
此示例使用实例来记录当前选中的选项卡。结合与相关属性的绑定，可以使用 CSS-3 :enabled 和 :disabled 伪类来突出显示选中的选项卡。相关条件是选项卡的 selected 属性。触发器引用实例。如果实例中的选项卡具有设置为“true”的 selected 属性，则相应的触发器将“启用”，其他触发器将被禁用（默认情况下不可见）。它们在禁用触发器的 CSS 语句中变为可见。在 case 语句中需要两行额外的代码来切换每个选项卡的实例中的 selected 属性。两个事件“xforms-select”和“xforms-deselect”用于设置值。
注意：此方法仅在 Firefox 3.0 和 Mozilla XForms 插件 0.8.6ff3 中进行了测试。
请注意，此示例基于 水平文件选项卡菜单突出显示 示例，但使用触发器、菜单和事件来切换选项卡。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>CSS: a tabbed interface</title>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
/* Put the tab divs all on one line */
div.horiz-tabs-menu {
display: inline;
}
/* style each individual tab */
div.horiz-tabs-menu xf|trigger.tab {
color: black;
border: 0.1em outset #BBB; /* Make it look like a button */
border-bottom: 0.1em solid #CCC;
font-weight: bold;
font-family: Helvetica, sans-serif;
text-decoration: none;
margin-right: 5px;
padding: 0.2em;
/* round the top corners - works under FireFox */
-moz-border-radius: .5em .5em 0em 0em;
}
/* Make non-selected (disabled) tabs appear in the background */
div.horiz-tabs-menu xf|trigger.tab:disabled {
/* by default disabled (non relevant) items are not displayed,
so they need to be displayed to be in the background */
display: inline;
border-bottom: none;
background: #999;
}
/* Make the selected (enabled) item or default selection to appear on top */
div.horiz-tabs-menu xf|trigger.tab:enabled {
border-bottom: 0.1em solid #CCC;
background: #CCC;
}
xf|switch xf|case div {
background: #CCC; /* Light gray */
padding: 0.3em; /* Looks better */
}
</style>
<xf:model id="tab-handling">
<xf:instance xmlns="" id="tabs">
<tabs>
<tab title="Tab 1" selected="true"/>
<tab title="Tab 2" selected="false"/>
<tab title="Tab 3" selected="false"/>
</tabs>
</xf:instance>
<xf:bind nodeset="instance('tabs')/tab" relevant="@selected = 'true'" type="xs:boolean"/>
</xf:model>
</head>
<body>
<xf:group model="tab-handling" ref="instance('tabs')">
<div class="horiz-tabs-menu">
<xf:trigger ref="tab[1]" class="tab" appearance="minimal">
<xf:label><xf:output ref="@title"/></xf:label>
<xf:toggle ev:event="DOMActivate" case="case-1"/>
</xf:trigger>
<xf:trigger ref="tab[2]" class="tab" appearance="minimal">
<xf:label><xf:output ref="@title"/></xf:label>
<xf:toggle ev:event="DOMActivate" case="case-2"/>
</xf:trigger>
<xf:trigger ref="tab[3]" class="tab" appearance="minimal">
<xf:label><xf:output ref="@title"/></xf:label>
<xf:toggle ev:event="DOMActivate" case="case-3"/>
</xf:trigger>
</div>
</xf:group>
<xf:switch>
<xf:case id="case-1" selected="true()">
<xf:setvalue model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[1]/@selected" value="true()"/>
<xf:setvalue model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[1]/@selected" value="false()"/>
<div>
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
</div>
</xf:case>
<xf:case id="case-2">
<xf:setvalue model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[2]/@selected" value="true()"/>
<xf:setvalue model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[2]/@selected" value="false()"/>
<div>
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
</div>
</xf:case>
<xf:case id="case-3">
<xf:setvalue model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[3]/@selected" value="true()"/>
<xf:setvalue model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[3]/@selected" value="false()"/>
<div>
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
</div>
</xf:case>
</xf:switch>
</body>
</html>
选中的文件选项卡应该以浅灰色突出显示。在实例中将选项卡的 selected 属性设置为“true”会突出显示页面加载时的选项卡。case 的相应 selected 属性应该相应设置。需要一些额外的代码来模拟触发器的切换。更好的方法是内置机制来做类似的事情。