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  and   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  and   pseudo classes to highlight the selected tab. The relevant condition is the  attribute of a tab. The triggers refer to the instance. If a tab in the instance has a  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  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

Discussion
The selected file-tab should highlight in a light grey. Setting the  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.