使用繫結突出顯示 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 屬性應該相應設定。需要一些額外的程式碼來模擬觸發器的切換。更好的方法是內建機制來做類似的事情。