Ajax Tabs

Contents 1 Introduction 2 Home.page 2.1 Home.page markup 3 Home.php 3.1 Home.php Source 4 CSS

Introduction

This tutorial explains how to create an ajax tabbed interface. It consists of some active link buttons and active panels. One drawback with the current implementation is that if you are going to load data when a tab page is loading you need to wait for the data to be loaded before showing the markup for the tab page. The tutorial will be updated when this feature is implemented.

Home.page

Lets take a look at the page markup first. It holds our tab buttons which are made up of a list. The CSS document is supplied at the end of this post. Each tab button has a callback that informs us which tab page we would like to load. In addition it has some client side properties that basically just shows / hides a status indicator (check http://www.ajaxload.info/ if you need a loading image;) ). After the button markup we have the actual tab pages. They are made up of active panels, and Home is the only one that's initially visible.

Home.page markup

 
  <div id="loading" 
    style="background: url(indicator.gif) no-repeat top left;
      display: none; border: none; z-index: 10;
      width: 16px; height: 16px;
      position: absolute;
      left: 5px; top: 5px;">
  </div>
	
    <div id="menu">
      <ul>
        <li>
          <com:TActiveLinkButton Text="Home"
            OnCallback="changeTab" 
            ActiveControl.CallbackParameter="panelHome"
          >
	    <prop:ClientSide 
              OnLoading="$('loading').show()"
              OnComplete="$('loading').hide()"
            />
          </com:TActiveLinkButton>	
        </li>
        <li>
          <com:TActiveLinkButton Text="About" 
            OnCallback="changeTab" 
            ActiveControl.CallbackParameter="panelAbout"
          >
            <prop:ClientSide
              OnLoading="$('loading').show()"
              OnComplete="$('loading').hide()"
            />
          </com:TActiveLinkButton>
        </li>
        <li>
          <com:TActiveLinkButton 
            Text="Downloads" 
            OnCallback="changeTab"
            ActiveControl.CallbackParameter="panelDownloads"
          >
            <prop:ClientSide
              OnLoading="$('loading').show()"
              OnComplete="$('loading').hide()"
            />
          </com:TActiveLinkButton>
        </li>
        <li>
          <com:TActiveLinkButton
            Text="Contact"
            OnCallback="changeTab"
            ActiveControl.CallbackParameter="panelContact"
          >
            <prop:ClientSide
              OnLoading="$('loading').show()"
              OnComplete="$('loading').hide()"
            />
          </com:TActiveLinkButton>
        </li>
      </ul>
    </div>
	
   <com:TActivePanel ID="panelHome">
     <h1>Home panel</h1>
   </com:TActivePanel>
	
   <com:TActivePanel ID="panelAbout"  Display="None">
     <h1>About panel</h1>
   </com:TActivePanel>
	
   <com:TActivePanel ID="panelDownloads" Display="None">
     <h1>Downloads panel</h1>
   </com:TActivePanel>
	
   <com:TActivePanel ID="panelContact" Display="None">
     <h1>Contact panel</h1>
   </com:TActivePanel>

Home.php

Lets take a look at the php code behind this. It's really simple. We have a array of the available tab pages, and a showPanel method that takes care of showing / hiding the correct tabs based on which panel we want to show. Once it finds the correct one it will render it. The other methods are the ones the tab buttons call. As I mentioned earlier there probably is a way to have one method for this and setting the parameters in the markup. I'll update this post if I can make it work.

Home.php Source

 
<?php
class Home extends TPage{
	
  private $panels = array(
    'panelHome', 'panelAbout',
    'panelDownloads','panelContact'
  );
  
  private function showPanel ($id, $param) {
    foreach ($this->panels as $panel)
      $this->$panel->setDisplay (($id==$panel)?"Dynamic":"None");
  }
 
  public function changeTab($sender, $param){
    $this->showPanel($sender->getActiveControl()->CallbackParameter, $param);
  }
}
?>

CSS

A basic CSS markup. Not really sure if I've wrote this myself or if I found it somewhere else. I will probably update it later.

 
#menu
{
	background-color: #E7371A;
	color: #272900;
	padding: 2px 0;
	margin-bottom: 22px;
}
 
#menu ul
{
	margin: 0 0 0 20px;
	padding: 0;
	list-style-type: none;
	border-left: 1px solid #C4C769;
}
 
 
 
#menu li
{
	display: inline;
	padding: 0 10px;
	border-right: 1px solid #C4C769;
}
 
 
 
#menu li a
{
	text-decoration: none;
	color: #272900;
}
 
 
 
#menu li a:hover
{
	text-decoration: none;
	color: #fff;
	background-color: #D5C8B8;
}