XForms, Horizontal File Tab Menu Highlighted With Binding

Motivation

This 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

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.

Sample XForms Application

Load XForms Application

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms">;

CSS: a tabbed interface
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 */
}

id="tab-handling">
xmlns="" id="tabs">

title="Tab 1" selected="true"/>
title="Tab 2" selected="false"/>
title="Tab 3" selected="false"/>

nodeset="instance('tabs')/tab" relevant="@selected = 'true'" type="xs:boolean"/>

model="tab-handling" ref="instance('tabs')">
class="horiz-tabs-menu">
ref="tab[1]" class="tab" appearance="minimal">
ref="@title"/>
ev:event="DOMActivate" case="case-1"/>

ref="tab[2]" class="tab" appearance="minimal">
ref="@title"/>
ev:event="DOMActivate" case="case-2"/>

ref="tab[3]" class="tab" appearance="minimal">
ref="@title"/>
ev:event="DOMActivate" case="case-3"/>

id="case-1" selected="true()">

model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[1]/@selected" value="true()"/>
model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[1]/@selected" value="false()"/>

1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111
1111111111 1111111111 1111111111

id="case-2">

model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[2]/@selected" value="true()"/>
model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[2]/@selected" value="false()"/>

2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222
2222222222 2222222222 2222222222

id="case-3">

model="tab-handling" ev:event="xforms-select"
ref="instance('tabs')/tab[3]/@selected" value="true()"/>
model="tab-handling" ev:event="xforms-deselect"
ref="instance('tabs')/tab[3]/@selected" value="false()"/>

3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333
3333333333 3333333333 3333333333

Discussion

The 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.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.