XForms/Horizontal File Tab Menu

From Wikibooks, the open-content textbooks collection

< XForms
Jump to: navigation, search

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:

Horizontal tabbox

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

[edit] Link to XForms Application

Horizontal Tabbox

[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>
   </head>
   <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>
   <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:

W3C Target Example

We could also modify the example to work with XForms.


Next Page: Horizontal File Tab Menu Highlighted | Previous Page: Multiple model comparison

Home: XForms

Retrieved from "http://en.wikibooks.org/wiki/XForms/Horizontal_File_Tab_Menu"