XForms/Horizontal File Tab Menu
This page may need to be
Contents |
[edit] 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.
[edit] 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.
[edit] Link to XForms Application
[edit] Sample Program
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events"> <head> <title>XForms Colored Horizontal Tab Menu</title> <style> @namespace xf url("http://www.w3.org/2002/xforms"); /* all the attributes of each tab, except the background color */ #horiz-tab-menu xf|trigger { border-left: black solid 1px; border-top: black solid 1px; border-right: black solid 1px; border-bottom: 0px; font-weight: bold; font-family: Helvetica, sans-serif; font-size: .9em; margin-right: 5px; padding: 3px; /* the following only works under FireFox */ -moz-border-radius: .5em .5em 0em 0em; border-radius-topright: .5em; border-radius-topleft: .5em; } /* the attributes of each div inside of a case */ xf|switch xf|case div { border-left: solid black 1px; border-top: solid black 0px; border-right: solid black 1px; border-bottom: solid black 1px; } #tab-1, #div-1 { background-color: pink; } #tab-2, #div-2 { background-color: salmon; } #tab-3, #div-3 { background-color: khaki; } </style> </head> <body> <div id="horiz-tab-menu"> <xf:trigger id="tab-1" appearance="minimal"> <xf:label>Tab 1 Title</xf:label> <xf:toggle case="case-1" ev:event="DOMActivate" /> </xf:trigger> <xf:trigger id="tab-2" appearance="minimal"> <xf:label>Tab 2 Title</xf:label> <xf:toggle case="case-2" ev:event="DOMActivate" /> </xf:trigger> <xf:trigger id="tab-3" appearance="minimal"> <xf:label>Tab 3 Title</xf:label> <xf:toggle case="case-3" ev:event="DOMActivate" /> </xf:trigger> </div> <xf:switch> <xf:case id="case-1" selected="true"> <div id="div-1"> menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content menu 1 content </div> </xf:case> <xf:case id="case-2"> <div id="div-2"> menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content menu 2 content </div> </xf:case> <xf:case id="case-3"> <div id="div-3"> menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content menu 3 content </div> </xf:case> </xf:switch> </body> </html>
[edit] Testing
Note that the text under the selected tab changes when you click on the tab.
[edit] 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 tabbox element[1]. 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.
[edit] Using the target pseudo element
Here is an example that uses the CSS-3 target pseudo element:
We could also modify the example to work with XForms.
[edit] 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:
<div class="{if (instance('selected-item') = .) then 'selected' else 'not-selected')}">
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.
