y last DHTML solution showed you how to create a tabbed user interface (UI). Unfortunately, the code to write the UI was specific for each document. It would be far more convenient to have a way to generate such interfaces automatically using generic routines. That way, you could create as many tabbed UIs as you need?without repeating the code each time.
Creating tabbed interfaces is straightforward, but tedious and document-specific. How can you automate the process and make it reusable?
Mixing object oriented programming(OOP) with some clever string tricks makes creating the tabbed UI generator a snap!Design an Object Oriented Tabbed UI
As with any OOP project, the first step is to design the objects you’ll need. For this exercise, you’ll create tabPanel objects, each of which consists of a tab object and a panel object. The tab and panel objects hold property values, and the tabPanel objects hold references to a tab and a panel as well as a method to display the tabPanel in an HTML document.
You need constructors for the objects. Open your favorite text editor and enter the following code:
//tab constructor function tab(id, text,top,left,width){ this.id = id; this.text = text; this.top = top; this.left = left; this.width = width; } //panel constructor function panel(id, src){ this.id = id; this.src = src; } //tabPanel constructor function tabPanel(tab, panel){ this.tab = tab; this.panel = panel; this.writeTabPanel = writeTabPanel; }
The preceding constructors define the objects required for the project. As you can see, tab objects have id, text, top, left, and width member variables. The code in this project implements panel content as external objects, so panel objects consist of an id and a source (src) for the external content. Each tabPanel object consists of a tab and a panel.You need a way to write the tabPanel to the document, so the next step is to create a method to do the writing, called writeTabPanel(). Append the following code to the file you just started:
//method that writes tabPanel implementation to page function writeTabPanel(){ var tpText = ”; tpText += ‘
‘; tpText += this.tab.text; tpText += ‘
‘; tpText += ‘‘; document.write(tpText); }
Despite the complex look of the code, the writeTabPanel() method just builds a string containing
Next you need to write some methods to handle the events that the tabPanel fires after it has been written to the page. Add the following code to your file:
//document vars and methods var currentPanel = ”; var currentTab = ”; function showPanel(tab,panel){ hidePanel(currentPanel); document.getElementById(panel). style.visibility = ‘visible’; currentPanel = panel; setState(tab); currentTab = tab; }function hidePanel(panel){ if(currentPanel!=”) document.getElementById(panel). style.visibility = ‘hidden’; } function hilite(tab){ tab.style.backgroundColor = ‘#ddddff’; } function unHilite(tab){ tab.style.backgroundColor = ‘#ffffff’; } function setState(tab){ if(currentTab!=”) document.getElementById(currentTab). style.color = ‘navy’; document.getElementById(tab).style.color = ‘red’; }
The methods above handle all the user interaction with the UI. Save the file as oopTabbedUI.js in an empty directory.Create CSS Style Sheets for the UIThe next step is to create the CSS styles for the tabbed UI. In a new file, enter the following CSS rules:
.tab{ color: navy; background-color: white; border: thin solid navy; position: absolute; text-align: center; font: 9pt Verdana,sans-serif; z-index: 2; padding: 3; cursor: pointer; cursor: hand; } .panel{ position: absolute; top: 32; left: 10; width: 95%; z-index: 1; height: 85%; visibility: hidden; font: 12pt Verdana,sans-serif; color: navy; border: thin solid navy; padding: 0; }
These styles are suitable for a horizontal tab orientation. In the same directory where you saved the oopTabbedUI.js file, save this file as horiz.css. Next, create a CSS file suitable for a vertical orientation. Open another new file and add the following CSS rules: .tab{ color: navy; background-color: white; border: thin solid navy; position: absolute; text-align: center; font: 9pt Verdana,sans-serif; z-index: 2; padding: 3; cursor: pointer; cursor: hand; } .panel{ position: absolute; top: 32; left: 100; width: 85%; z-index: 1; height: 85%; visibility: hidden; font: 12pt Verdana,sans-serif; color: navy; border: thin solid navy; padding: 0; }
Name this file vert.css and save it in the same directory as the others.Create the HTML FileI’ve modularized this project as much as possible by keeping all of the files external to the HTML. Creating the HTML file is almost trivial at this point. You’ll just need to include a block in the of the document that creates tabPanel objects and calls the writeTabPanel() method. Open a new file and add this code:
OOP Tabbed UI
Save the completed file as oopTabbedUI.htm in the same directory as the other files you've created. You can test a live copy here.The code in the oopTabbedUI.htm file demonstrates two methods for creating tabPanel objects. It creates tabPanelOne by first explicitly creating tab and panel objects and passing them to the constructor. It creates tabPanelTwo by implicitly creating tab and panel objects directly in the tabPanel constructor. The tab and panel objects are anonymous?they don't have variable names associated with them. In either case, the code calls the writeTabPanel() method to write the tabPanel to the document after creating the objects. Finally, the code calls showPanel() to display the first panel and set the state of the corresponding tab.
You can create a tabbed UI with the tabs oriented vertically on the page with an HTML page like this:
OOP Tabbed UI
Save the file as oopTabbedUI2.htm in the same directory as the other files. With this version, the tabs appear vertically, on the left side of the page. You can test a live copy here.Automate the ProcessOn first glance, creating all of those external files seemed like more work than it was worth. But by modularizing all the code, it becomes much easier to create a Tabbed UI Generator. The generator can create a set of up to five tabPanel objects; however the number is arbitrary. Feel free to modify it to suit your needs.
I'll create form fields to hold the properties for the tabs and panels as well as a text area to display the code. You'll be able to copy and paste the code into a new file from there. Open up a new file and create the UI for the generator:
Tabbed UI Generator
Finally, add the following tag to the head of the document:
Save the completed file as tabbedUIGenerator.htm. This complicated-looking script lets you enter tab ids, values, and content sources, and then builds a string for an HTML page that includes the proper external files and tabPanel objects based on the entered data. You can cut-and-paste the result directly into an HTML page. You can test a live copy here.Some of the helper functions I've included may look familiar to you as I borrowed them from my article Automate Your Form Validation. The functions ensure that the code processes only those rows in the table that contain data.
I've made some assumptions with this application?most notably that Tab1 and Panel1 should display when the page loads. I've also assumed that, at the very least, the Tab1 and Panel1 rows in the table will contain useful information.
One short warning: You can't embed a complete closing