Way 2 Web

Web development tips


 
Ajax Tabbed Content

Introduction

This is the Ajax version of our JavaScript Tabs widget.

Ajax tabs are ideal when you want to have large amounts of data on tap, but not at the expense of page load time. Divide the content into logical sections and put each one in a "tab." The contents of the tab will be loaded (a la Ajax) the first time the tab is accessed. If the user does not view the tab, its data will never burden the client.

Once again, our implementation uses an <ul> for the tabs, and <div> for each content area. All the behavior is defined in a neat JavaScript array of objects. (See below.)

As with the JavaScript Tabs widget, you can keep track of which panel was last viewed using an optional tracker element. There is also an optional loading content indicator tag, which will display only when the client is busy fetching data from the server.

As with all our widgets, the appearance of the widget is fully customizable using CSS and HTML.

Note: the Ajax solution is appropriate when the tabs contain form elements, since you will want all form elements available from the start.

API

Constructor

AjaxTabs (tabsArray [, startIndex] [, loadingElementID] 
            [, trackerElementID] [, errorHandler]);
tabsArray
Array of tab data objects. Each object represents one tab and must have the following properties:
header
ID of header element (list element) for the tab
content
ID of content element (div tag) for the tab
url
Url of the server-side page that returns the content for this tab
startIndex
(Optional) Index indicating which tab is to be displayed on page load
loadingElementID
(Optional) ID of element used to indicate when data is being fetched
trackerElementID
(Optional) ID of element used to track which tab is active. Useful when you need to reload the page and open to the tab that was last active. (I.e., next page load, use this element's value for the StartIndex parameter)
errorHandler
(Optional) Error handling function. (For advanced users)
[Top of page]

Demo

Content tabs

Click a tab to view its content.

The loading indicator to the right of the tabs appears only momentarilly since our demo loads a very small data set. The indicator does not display the second time a tab is accessed, since the data was fetched the first time.

  • Tab 1
  • Tab 2
  • Tab 3
  • Loading...
Tab tracker:
[Top of page]

Code

HTML

<ul class="tab-headers">
    <li id="tab-header1" class="active">Tab 1</li>
    <li id="tab-header2">Tab 2</li>
    <li id="tab-header3">Tab 3</li>
    <li id="loading-tab">Loading...</li>
</ul>
<div class="tab-content" id="tab-content1"></div>
<div class="tab-content" id="tab-content2"></div>
<div class="tab-content" id="tab-content3"></div>
Tab tracker:<input type="text" id="tracker" name="tracker" value="" />

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_util.js"></script>
<script language="javascript" src="../../js/y/y_AjaxTabs.js"></script>
<script language="javascript">
    var tabInfo = 
    [{header:"tab-header1",content:"tab-content1",
         url:"ajaxServer.aspx?action=tabs&id=1"},
     {header:"tab-header2",content:"tab-content2",
         url:"ajaxServer.aspx?action=tabs&id=2"},
     {header:"tab-header3",content:"tab-content3",
         url:"ajaxServer.aspx?action=tabs&id=3"}]; 
    var tabRelationship;
			             
    window.onload = function(){
        tabRelationship = 
            new ylib.widget.AjaxTabs(tabInfo, 0, "loading-tab", "tracker");
    }
</script>

Css

ul.tab-headers,
.tab-content {
    width: 400px;
}
ul.tab-headers { 
    height: 20px;      
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;       
}
ul.tab-headers li {
    float: left;
    padding: 3px 10px 3px 10px;
    border: solid 1px black;
    border-bottom: 0;
    margin-left: 3px;
    cursor: pointer;
}
ul.tab-headers li.active {
    background-color: black;
    color: white;
}
.tab-content {
    margin: 0;
    padding: 0 5px 5px 5px;
    border: solid 1px black;
    visibility: hidden;
    height: 150px;
}
#tab-content1 {
    visibility: visible;
}
#loading-tab {
    width: 195px;
    color: red;
    text-align:right;
    padding-right: 5px;
    border: 0;
}

The active tab header is indicated via the CSS class active.

Note that we define the content areas, and the loading element as visibility: hidden; so that the they don't appear as the page loads.

[Top of page]

Files

Have you benefitted from this site?

If so, please consider making a donation.

Your appreciation is.. well, greatly appreciated.

[Top of page]