XForms/Horizontal File Tab Menu Highlighted With Binding
Motivation
editThis is another approach for a horizontal file tab menu.
Approach: Use a binding with a relevant attribute and the CSS-3 :enabled and :disabled pseudo classes
edit
This example uses an instance to record which tab is currently selected. In conjunction with a binding with a relevant attribute it is possible to use the CSS-3 :enabled and :disabled pseudo classes to highlight the selected tab. The relevant condition is the selected attribute of a tab. The triggers refer to the instance. If a tab in the instance has a selected attribute set to "true" the corresponding trigger is "enabled" the other triggers are disabled (and by default not visible). They are made visible in the CSS statement for the disabled triggers.
Two additional lines are needed in the case statements to toggle the selected attribute in the instance for each tab. The two events "xforms-select" and "xforms-deselect" are used to set the values.
Note: This approach is only tested with Firefox 3.0 and the Mozilla XForms Plugin 0.8.6ff3.
Note that this example is based on the Horizontal File Tab Menu Highlighted example but uses a trigger, menu and events to toggle the tabs instead.
Screen Image
edit
Sample XForms Application
editSample Program
edit<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>
Discussion
editThe selected file-tab should highlight in a light grey. Setting the selected attribute of a tab to "true" in the instance, highlights the tab on page load. The corresponding selected attribute of the case should be set accordingly.
Some additional code is needed to simulate the toggeling of the triggers.
A better approach would be to have a build in mechanism doing something similar.