XForms/Horizontal File Tab Menu

Sample Horizontal Tab Menu
This is an example of a horizontal tab menu using CSS and the XForms switch and case statements. Both the tab inside the horizontal tab menu and the div inside the case have the same background color giving the appearance of the selected tab popping to the front of the others.

Screen Image
You should see a menu that looks similar to this when running under the FireFox browser:



Note that the tab that is selected has the same color of the content.

Link to XForms Application
Horizontal Tabbox

Testing
Note that the text under the selected tab changes when you click on the tab.

Discussion
One of the best ways to reduce your JavaScript is to start converting your menus to use XForms.

This example can be modified to also conditionally display tabs based on state variables in the model.

This example should be made consistent with the XUL  element. If XForms used all the XUL elements this entire example would be much easier to be a standard.

Hopefully XUL and XForms will be consistent in the future.

Using the target pseudo element
Here is an example that uses the CSS-3 target pseudo element:

W3C Target Example

We could also modify the example to work with XForms.

Using the Non-Standard Attribute Value Templates (AVT)
XForms version 1.0 does not include the ability to put conditional statements within attribute values. Attribute values are text right of the equal sign usually enclosed in double quotes.

Some vendors that have implemented a feature called "AVT" that can be used to conditionally change the values of class attributes. For example:

This effectively will change the style for each tab to use the selected or not-selected style.

Future versions of XForms standards may include AVT functions.