- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (common.css)
- Creating the Supplemental CSS Style Rules (advanced.css)
- Creating the Basic Document Object Creation Script (docobj.js)
- Creating the Tab Navigation Script (tabs.js)
- Modifying the XHTML Markup to Call the Functions
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating the Tab Navigation Script (tabs.js)
The file, tabs.js, contains the JavaScript that makes the tab navigation work.
The tab navigation script basically does two things: it changes the stacking order or z-index of the elements and changes the background color and textcolor of the tab. This is done by simply changing the style property values of elements.
Open the file tabs.js.
Define the arrays, tabArray and boxArray. These arrays hold the style object text strings that are obtained with the getStyleObj() function, which will be used in the tab navigation functions.
The tabArray() array holds the style property strings for the tab1 through tab5 div elements. The tabTextArray() array holds the style property strings for the tabmiddle1 through tabmiddle5 td elements. The boxArray() array holds the style property text strings for the box1 through box5 div elements.
It's important to put the array values in the proper order because the functions we'll define later will point to the index in each array.
NOTE
The data in array position 0 for each array has been set to null. This is just a matter of convenience—all arrays start at index number 0, but I always tend to forget this because I like to start counting at 1. But remember that the total number of items in the array is 6.
Defining text strings as array values can make writing scripts that require repeating or looping statements much more efficient.
/* The tab navigation script. Always use in conjunction with docobj.js! */
// Set up array of tab element style property strings
var tabArray = new Array(6);
tabArray[0] = null;
tabArray[1] = getStyleObj('tab1');
tabArray[2] = getStyleObj('tab2');
tabArray[3] = getStyleObj('tab3');
tabArray[4] = getStyleObj('tab4');
tabArray[5] = getStyleObj('tab5');
var tabTextArray = new Array(6);
tabTextArray[0] = null;
tabTextArray[1] = getStyleObj('tabmiddle1');
tabTextArray[2] = getStyleObj('tabmiddle2');
tabTextArray[3] = getStyleObj('tabmiddle3');
tabTextArray[4] = getStyleObj('tabmiddle4');
tabTextArray[5] = getStyleObj('tabmiddle5');
// Set up array of text box element style property strings
var boxArray = new Array(6);
boxArray[0] = null;
boxArray[1] = getStyleObj('box1');
boxArray[2] = getStyleObj('box2');
boxArray[3] = getStyleObj('box3');
boxArray[4] = getStyleObj('box4');
boxArray[5] = getStyleObj('box5');
Define some global variables that are used in the functions.
The variable, active, is used as a holder to see which element is the one on top.
The other variables hold color values and are used to color the tabs and tab text.
var active = null; var activebgcolor = "#993399"; var activetextcolor = "#000000"; var inactivebgcolor = "#cccccc"; var inactivetextcolor = "#999999"; var overbgcolor = "#cc99cc"; var overtextcolor = "#ffcc99";
Start to define the function, tabcolor(). This function sets the appearance of the tab.
Three arguments are passed to the function: tabnum, or the number of the tab; color1, which is the background color of the tab; and color2, which is the text color of the tab.
Continue to define function, tabcolor(). Declare the value of the local variable tab to be the evaluated result of the value in the tabArray[tabnum] array element. For example, if the value of tabnum is 3, the value of tabArray[tabnum] is the result returned by getStyleObj('tab3').
Declare the value of the local variable, tabtext, to be the evaluated result of the value in the tabTextArray[textnum] array element. If the value of tabnum is 3, the value of tabTextArray[tabnum] is the result returned by getStyleObj('tabmiddle3').
Continue to define the function, tabcolor(), by setting the backgroundColor property of tab to the value of color1 and the color property of tabtext to the value of color2.
Finally, define the code that changes the appearance of the cursor. Because the tabcolor() function will be used with mouse events associated with a td element, the cursor will not change its appearance by default—unlike mouse events that occur when associated with an a link element. Therefore, we'll change the cursor style to the "pointing hand." Because the syntax is different for Internet Explorer and Netscape 6/Mozilla, we have a branching statement: the cursor style is set to "hand" in IE and "pointer" in Netscape 6.
function tabcolor(tabnum,color1,color2) { var tab = eval(tabArray[tabnum]); var tabtext = eval(tabTextArray[tabnum]); tab.backgroundColor = color1; tabtext.color = color2; if (document.all) { tabtext.cursor = 'hand'; } else { tabtext.cursor = 'pointer'; } }Define the function, choosebox().
This is the core function that sets the z-index of the content divs and tabs. It also calls the tabcolor() function.
One argument passed to it is tabnum, which contains the appropriate array index number for the three arrays we defined previously.
First, check to see if the browser in use supports document.all or document.getElementById. If not, the function will not continue.
Next, check to see if the value of the variable active is null. If it is not, then that means that one of the layers is "active"—or was the last selected one. Therefore, the 'active' elements are reset to their 'inactive' states.
Assign the local variables activetablayer, activetabtext, and activeboxlayer the evaluated values of the tabArray[active], tabTextArray[active], and boxArray[active] array elements, respectively. Then set the zIndex property value of activetablayer and activeboxlayer to 0 and reset the backgroundColor and color values of the tabTextArray[active] element by calling the tabcolor() function, passing active, inactivebgcolor, and inactivetextcolor as the arguments.
Converting Hyphenated CSS Style Properties to JavaScript
Most CSS style properties can be used as-is in JavaScript, with the exception of style properties with hyphens such as background-color, z-index, and font-family. We can't use hyphens for variable, function, custom defined property, or method names because the hyphen can be interpreted as a minus sign.
Fortunately, the rule for "converting" such CSS property names to JavaScript is simple: Take away the hyphen and capitalize the first letter of the word after the hyphen. So background-color becomes backgroundColor, z-index becomes zIndex, and so on. (Remember that while CSS is case-insensitive, JavaScript is case sensitive!)
Continue to define the function, choosebox(). This section of the function sets the newly selected elements to the 'active' state.
Assign the local variables, tablayer, tabtext, and boxlayer, the evaluated values of the tabArray[num], tabTextArray[num], and boxArray[num] array elements, respectively. Then set the zIndex property value of tablayer and boxlayer to 10 and reset the backgroundColor and color values of the tabTextArray[tabnum] element by calling the tabcolor() function, passing tabnum, activebgcolor, and activetextcolor as the arguments.
Finally, set the new value of active as tabnum. This makes the currently selected elements the active elements.
// the central tab navigation function function choosebox(tabnum) { if (active) { var activetablayer = eval(tabArray[active]); var activetabtext = eval(tabTextArray[active]); var activeboxlayer = eval(boxArray[active]); activetablayer.zIndex = 0; activeboxlayer.zIndex = 0; tabcolor(active,inactivebgcolor, inactivetextcolor); } tablayer = eval(tabArray[num]); tabtext = eval(tabTextArray[num]); boxlayer = eval(boxArray[num]); tablayer.zIndex = 11; boxlayer.zIndex = 10; tabcolor(tabnum,activebgcolor, activetextcolor); active = tabnum; }Define the function, tabover().
The tabover() function simply calls the tabcolor() function if the value of tabnum does not equal the value of active (in other words, if the chosen element is not the one currently on top or "active"). The values of the variables, overbgcolor and overtextcolor, are passed to tabcolor() as arguments. The tabover() function is invoked with the mouseover event.
function tabover(tabnum) { if (tabnum != active) { tabcolor(tabnum,overbgcolor,overtextcolor); } }Define the function tabout().
The tabout() is identical to the tabover() function, except that it passes the values of the variables, inactivebgcolor and inactivetextcolor, as arguments. This function is called with the mouseout event.
function tabout(tabnum) { if (tabnum != active) { tabcolor(tabnum,inactivebgcolor,inactivetextcolor); } }