Home arrow JavaScript arrow Page 2 - ACP Tab Web Page
JAVASCRIPT

ACP Tab Web Page


A tab web page is a perfect candidate for the technology of Active Client Pages (ACP). It's a web page with buttons at the top. When you click a button, all the HTML content below the line of buttons changes. It is as if each button has a page hidden in it. ACP makes loading those pages go much more quickly.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
October 19, 2009
TABLE OF CONTENTS:
  1. · ACP Tab Web Page
  2. · ACP Feature
  3. · The Code
  4. · The Ajax Functions

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
ACP Tab Web Page - ACP Feature
(Page 2 of 4 )

When the tabWebPages.htm file is downloaded, you see the page content of the first tab. This content comes with the file. The next two pages' contents are downloaded by Ajax, after the first has been downloaded with the tabWebPages.htm file. These two pages are downloaded as strings in the background, unknown to the user. By the time the user would have finished reading the first page, the string contents of the other two pages would have been downloaded.

With conventional tab web pages, the user has to wait for all the page contents to download, before the complete page settles. With ACP, the complete web page settles after the first page content has been downloaded (with the file tabWebPages.htm).

Technical Features

The first line of the tabWebPages.htm file has the buttons (Tabs). These are normal HTML buttons. There is a DIV element below these buttons. The page content for any button goes into this DIV element.

Each of the buttons (Tabs) has an onclick event attribute. When you click any of these buttons, a JavaScript function is called. This function has the button number (1, 2 or 3) of the button clicked as an argument. Whenever this function is called, it replaces whatever was in the DIV element (below the line of Tabs) with the page content for the button clicked.

After the first page content has been downloaded, there are two Ajax functions that download the contents of the other two pages in the form of strings -- one string per page.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials