ACP Tab Web Page
(Page 1 of 4 )
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.
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.”
Next: ACP Feature >>
More JavaScript Articles
More By Chrysanthus Forcha
