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 標籤示例