Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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


advertisement
Create the HTML File
I'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 <script> block in the <body> of the document that creates tabPanel objects and calls the writeTabPanel() method. Open a new file and add this code:

<html> <head> <title>OOP Tabbed UI</title> <link rel="stylesheet" type="text/css" href="horiz.css"></link> <script language="JavaScript" src="oopTabbedUI.js"> </script> </head> <body> <script language="JavaScript"> //explicit declaration of tab and panel var tabOne = new tab("tab1", "XML HomePage",10,10,150); var panelOne = new panel ("panel1","file:///c:\\xml\\index.htm"); var tabPanelOne = new tabPanel(tabOne,panelOne); tabPanelOne.writeTabPanel(); //anonymous declaration of tab and panel var tabPanelTwo = new tabPanel( new tab("tab2","XML Overview",10,160,150), new panel("panel2", "file:///c:\\xml\\overview.xml")); tabPanelTwo.writeTabPanel(); //show first panel showPanel("tab1","panel1"); </script> </body> </html>

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:

<html> <head> <title>OOP Tabbed UI</title> <link rel="stylesheet" type="text/css" href="vert.css"></link> <script language="JavaScript" src="oopTabbedUI.js"> </script> </head> <body> <script language="JavaScript"> //explicit declaration of tab and panel var tabOne = new tab("tab1", "XML Home",32,0,100); var panelOne = new panel( "panel1","file:///c:\\xml\\index.htm"); var tabPanelOne = new tabPanel(tabOne,panelOne); tabPanelOne.writeTabPanel(); //implicit anonymous declaration of tab and panel var tabPanelTwo = new tabPanel( new tab( "tab2","Overview",60,0,100), new panel( "panel2","file:///c:\\xml\\overview.xml")); tabPanelTwo.writeTabPanel(); //show first panel showPanel("tab1","panel1"); </script> </body> </html>

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.


Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap