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

Create CSS Style Sheets for the UI
The 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.

Previous Page

Next Page