Home arrow JavaScript arrow ACP Tab Web Page

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 / 2
October 19, 2009
  1. · ACP Tab Web Page
  2. · ACP Feature
  3. · The Code
  4. · The Ajax Functions

print this article

ACP Tab Web Page
(Page 1 of 4 )

When you click a button, it displays its page content, replacing the former page content. With ACP the time to download all these page contents is the time to download only the first page -- well, this is actually as seen by the user. That is the advantage ACP brings to conventional tab web pages.

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 user does not have to wait for all the page contents to be downloaded before the page settles.

You need basic knowledge of HTML, JavaScript and Ajax to understand this article.

Our Example

We shall use a simple example for illustration. I use a personal web server for this example. The user has to type http://localhost/tabWebPages.htm into the address bar of his browser. When he does this, the content of the tabWebPages.htm page will be displayed. In your commercial project, you have to replace http://localhost/ with your domain, like http://www.mywebsite.com/. http://localhost/ is the default web site for a personal web server.

The page for the WebPages.htm file is the complete page. It has the string content of each of the real pages you see when you click a tab at the top of the page.

There are three buttons on the first line of this page. These buttons are the tabs. The labels for the buttons are Tab1, Tab2 and Tab3. When the tabWebPages.htm file has just been downloaded (displayed), what you see below the buttons (Tab line), belong to the first button (Tab). When you click the second tab, you see its own page content. When you click the third button, you see the page content of the third tab. When you click the first button (Tab), you see its own page. Let us call the display produced by each button the real page.

The content of the first real page is simply,

“Page HTML Elements for Tab One.”

The content of the second real page is simply,

“Page HTML Elements for Tab Two.”

The content of the third real page is simply,

“Page HTML Elements for Tab Three.”

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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