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

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


advertisement
 

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


advertisement

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


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
×
We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date