Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Generate Tabbed Interfaces Automatically With JavaScript OOP-2 : Page 2




Application Security Testing: An Integral Part of DevOps

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 += '<div id="'; tpText += this.tab.id; tpText += '" class="tab" style="top:'; tpText += this.tab.top; tpText += ';left:'; tpText += this.tab.left; tpText += ';width:'; tpText += this.tab.width; tpText += '" onClick="showPanel(\''; tpText += this.tab.id + '\',\'' + this.panel.id; tpText += '\')" onMouseOver="hilite(this)" onMouseOut="unHilite(this)">'; tpText += this.tab.text; tpText += '</div>'; tpText += '<iframe id="'; tpText += this.panel.id; tpText += '" class="panel" src="'; tpText += this.panel.src; tpText += '"></iframe>'; document.write(tpText); }

Despite the complex look of the code, the writeTabPanel() method just builds a string containing <div> and <iframe> elements and their associated events so the tabPanel will function properly.

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date