dcsimg
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-3 : Page 3


advertisement

WEBINAR:

On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


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.


Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date