Generate Tabbed Interfaces Automatically With JavaScript OOP

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){ = id;      this.text = text; = top;      this.left = left;      this.width = width;   }   //panel constructor   function panel(id, src){ = id;      this.src = src;   }   //tabPanel constructor   function tabPanel(tab, panel){ = 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 +=; tpText += ‘

‘; tpText += ‘‘; document.write(tpText); }

Despite the complex look of the code, the writeTabPanel() method just builds a string containing



The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS