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 函式。