XForms/水平文件标签菜单突出显示
< XForms
复杂的 Web 表单通常将任务分解成多个视图，用户可以通过这些视图进行导航。这些视图通过屏幕顶部的“文件标签”集来访问。但用户需要了解哪个标签是当前标签的反馈，我们希望在不诉诸复杂的 JavaScript 的情况下实现这一点。
此示例使用 CSS-3 :target 伪元素来突出显示选定的标签。此标签与标签指定的网页部分相关联。例如，您可以将标签附加到 URL，例如：
http://www.example.com/mypage.html#mylabel
注意：这仅在 CSS-3 中有效，在 IE-6 中无效。
请注意，此示例与之前的示例非常相似，但它使用 HTML 锚点而不是触发器。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<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 div {
display: inline;
}
/* style each individual tab */
div.horiz-tabs-menu div a {
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 tabs appear in the background */
div.horiz-tabs-menu div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999;
}
/* Make the selected (targeted) item or default selection to appear on top */
div.horiz-tabs-menu div:target a {
border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
background: #CCC; /* Set active tab to light gray */
}
/* set non-selected tabs to dark gray */
div.horiz-tabs-menu div:not(:target) a {
border-bottom: none; /* Make the bottom border disappear */
background: #999; /* Set inactive tabs are dark gray */
}
xf|switch xf|case div {
background: #CCC; /* Light gray */
padding: 0.3em; /* Looks better */
}
</style>
</head>
<body>
<div class="horiz-tabs-menu">
<div id="tab1">
<a href="#tab1">Tab 1
<xf:toggle case="case-1" ev:event="DOMActivate" />
</a>
</div>
<div id="tab2">
<a href="#tab2">Tab 2
<xf:toggle case="case-2" ev:event="DOMActivate" />
</a>
</div>
<div id="tab3">
<a href="#tab3">Tab 3
<xf:toggle case="case-3" ev:event="DOMActivate" />
</a>
</div>
</div>
<xf:switch>
<xf:case id="case-1" selected="true()">
<div>
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
</div>
</xf:case>
<xf:case id="case-2">
<div>
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
</div>
</xf:case>
<xf:case id="case-3">
<div>
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
</div>
</xf:case>
</xf:switch>
</body>
</html>
选定的文件标签应以浅灰色突出显示。其他菜单应以深灰色显示，并且看起来更像是在背景中。与每个标签关联的内容应可见。
请注意，如果您希望第一个标签在页面加载时突出显示，您必须在 URL 中使用 #tab1。
虽然这个“技巧”有效，并且它确实去掉了某些常见的 JavaScript 代码，但它仍然在几个方面存在不足。
- 您在一个页面上只能有一个选定的标签。
- 没有办法突出显示初始标签，而无需在 URL 中添加标签。
- 标签会卡在 URL 中，并导致书签等功能出现问题。
理想情况下，XForms 会包含一个 :selected 伪元素，它允许您对组内选定的项目应用不同的样式。也许有人会把它作为 FireFox 的自定义控件来实现。
我还应该指出，我尝试向 tab1 div 添加一个名为“selected”的类，并在 CSS 中添加它以初始选择它，但当我选择不同的标签时，它不会取消选择。我找不到一种简单的方法来动态添加或删除 XForm 主体中元素的类。似乎没有 <xf:class add="selected"> 命令。也许这将添加到 XForms 规范的未来版本中。
以下示例展示了如何在模型中存储标签元素： Kurt Cagle 标签示例