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

by Tom Duffy

Mar 21, 2002

Page 4 of 5

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.

« Previous Page 1 2 345 Next Page »

0 Comments (click to add your comment)

Comment and Contribute