Login | Register   
LinkedIn
Google+
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-3 : Page 3


advertisement
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