XForms/水平文件标签菜单
< XForms
这是一个使用 CSS 和 XForms switch 和 case 语句的水平标签菜单示例。水平标签菜单中的标签和 case 中的 div 具有相同的背景颜色，使选定的标签看起来像弹出到其他标签前面。
在 FireFox 浏览器下运行时，您应该看到一个类似于此的菜单
请注意，选定的标签与内容具有相同的颜色。
<?xml version="1.0" encoding="UTF-8"?>
<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>XForms Colored Horizontal Tab Menu</title>
<style>
@namespace xf url("http://www.w3.org/2002/xforms");
/* all the attributes of each tab, except the background color */
body {font-family: Arial, Helvetica, sans-serif;}
/* instructions for styling the horizontal tabs at the top of the form */
#horiz-tab-menu {
padding-bottom: 2px;
}
#horiz-tab-menu xf|trigger {
border-left: gray solid 1px;
border-top: gray solid 1px;
border-right: gray solid 1px;
border-bottom: 0px; /* so the tab blends into the region under the tab */
font-weight: bold;
font-size: .9em;
/* spacing between the tabs */
margin-right: 9px;
padding: 3px;
/* round corners at the top of the tab - does not work on older versions of IE */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* properties common to all the swapped views */
#div-1,#div-2,#div-3 {
width: 500px;
padding: 5px;
border-left: solid gray 1px;
border-right: solid gray 1px;
border-bottom: solid gray 1px;
}
#tab-1, #div-1 {
background-color: #DDD; /* light gray */
}
#tab-2, #div-2 {
background-color: lightblue;
}
#tab-3, #div-3 {
background-color: khaki;
}
</style>
</head>
<body>
<h2>Using switch and case to simulate a tab-view.</h2>
<div id="horiz-tab-menu">
<xf:trigger id="tab-1" appearance="minimal">
<xf:label>Tab 1 Title</xf:label>
<xf:toggle case="case-1" ev:event="DOMActivate"/>
</xf:trigger>
<xf:trigger id="tab-2" appearance="minimal">
<xf:label>Tab 2 Title</xf:label>
<xf:toggle case="case-2" ev:event="DOMActivate"/>
</xf:trigger>
<xf:trigger id="tab-3" appearance="minimal">
<xf:label>Tab 3 Title</xf:label>
<xf:toggle case="case-3" ev:event="DOMActivate"/>
</xf:trigger>
</div>
<xf:switch>
<xf:case id="case-1" selected="true">
<div id="div-1">
This view is only displayed when tab 1 is selected.<br/>
This view is only displayed when tab 1 is selected.<br/>
This view is only displayed when tab 1 is selected.<br/>
This view is only displayed when tab 1 is selected.<br/>
</div>
</xf:case>
<xf:case id="case-2">
<div id="div-2">
This view is only displayed when tab 2 is selected.<br/>
This view is only displayed when tab 2 is selected.<br/>
This view is only displayed when tab 2 is selected.<br/>
This view is only displayed when tab 2 is selected.<br/>
</div>
</xf:case>
<xf:case id="case-3">
<div id="div-3">
This view is only displayed when tab 3 is selected.<br/>
This view is only displayed when tab 3 is selected.<br/>
This view is only displayed when tab 3 is selected.<br/>
This view is only displayed when tab 3 is selected.<br/>
</div>
</xf:case>
</xf:switch>
<p>This XForms example shows how the switch and case statements can be
used to simulate a multi-part form with a row of horizontal tabs at
the top of the form. Background colors are used to show which
tab is the currently selected tab.</p>
</body>
</html>
请注意，当您点击标签时，选定标签下的文本会发生变化。
将菜单转换为使用 XForms 是减少 JavaScript 的最佳方法之一。
此示例可以修改为根据模型中的状态变量有条件地显示标签。
此示例应与 XUL tabbox 元素[1] 保持一致。如果 XForms 使用了所有 XUL 元素，整个示例将更容易成为标准。
希望 XUL 和 XForms 将来能保持一致。
这是一个使用 CSS-3 目标伪元素的示例
我们也可以修改示例使其适用于 XForms。
XForms 1.0 版本不包含在属性值中放置条件语句的功能。属性值是等号右边的文本，通常用双引号括起来。
一些已实现名为“AVT”的功能的供应商可以使用它来有条件地更改类属性的值。例如
<div class="{if (instance('selected-item') = .) then 'selected' else 'not-selected')}">
这将有效地更改每个标签的样式，以使用 selected 或 not-selected 样式。
未来版本的 XForms 标准可能会包含 AVT 函数。