Dynamically Creating Tabs in PHP--tutorial.jcwcn.com

The first step in creating a tabbed application is to design the tabs in an image editing application like Adobe Photoshop or any other application of your choice. A sample of the tabs we are going to create in this tutorial is shown below. I have created those tabs in Adobe Photoshop

The next step is to clip the corners of those tabs. Four images will be required, the two corners (left and right) of selected tab and two corners (left and right) of the normal tab. Center of the tab can be filled with color.

But in this example I have used glossy effect on the tabs so the center of the tab cannot be filled with color. A slice will be required for the middle as well, so a total of the following six images will be used in the tabbed interface

	Left corner of selected tab
	Image to be repeated in the center of selected tab
	Right corner of selected tab
	Left corner of normal tab
	Image to be repeated in the center of normal tab
	Right corner of normal tab

Below is the complete PHP code to create tabs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Using Tabs With PHP</title>
<style>
.link{
  font-family:tahoma;
  font-size:11px;
  font-weight:bold;

  color:white;
  text-decoration:none;
}
</style>
</head>
 
<body>
<?
  $id=$_REQUEST['id'];
 
  $links=array();

 
  $links[]="Home";
  $links[]="Services";
  $links[]="Products";

  $links[]="Downloads";
  $links[]="Contact Us";
 
  $total_links=count($links);

?>
  <table cellpadding="0px" cellspacing="0">

    <tr>
      <td width="30px">&nbsp;</td>
<?
	for($i=0;$i<$total_links;$i++){ 
	  if($i+1==$id){
?>
      <td style="padding-left:3px">

  <table cellpadding="0" cellspacing="0">
    <tr height="28px">

      <td width="15px"><img src="images/selected-left.gif" /></td>
      <td style="background-image:url(images/selected.gif);" class="link"><?=$links[$i]?></td>

      <td width="15px"><img src="images/selected-right.gif" /></td>
    </tr>

  </table>
      </td>
      <? } else { ?>
      <td style="padding-left:3px">
  <table cellpadding="0" cellspacing="0">

    <tr height="28px">
      <td width="13px"><img src="images/tab-left.gif" /></td>

      <td style="background-image:url(images/tab.gif);"><a href="?id=<?=$i+1?>" class="link"><?=$links[$i]?></a></td>

      <td width="13px"><img src="images/tab-right.gif" /></td>
    </tr>

  </table>
      </td>
      <? } // else end
 
      }  //for end
    ?>
      <td width="30px">&nbsp;</td>
    </tr>

    <tr>
      <td colspan="<?=$total_links+2?>" bgcolor="#1895D5">&nbsp;</td>
    </tr>

    <tr>
      <td colspan="<?=$total_links+2?>" style="border:1px #1895D5 solid;">
        <h1 style="color:#1895D5">The text for linkid<?=$id?> goes here ...</h1>

      </td>
    </tr>
  </table>
</body>
</html>

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Dynamically Creating Tabs in PHP

relation tutorial

Category

New

Hot