Add tabs to your interface

calendar October 9, 2009

An easy way to break up a site is to display it using tabs, where the data is broken into subelements each correlating to a named tab.

Code:

<?php
 require_once('tabs.php');
 ?>
 <html>
 <head>
 <style type="text/css">
 .tab
 {
   border-bottom:1px solid black;
   text-align:center;
 }
 .tab-active
 {
   border-left:1px solid black;
   border-top:1px solid black;
   border-right:1px solid black;
   text-align:center;
   font-weight:bold;
 }
 .tab-content
 {
   padding:5px;
   border-left:1px solid black;
   border-bottom:1px solid black;
   border-right:1px solid black;
 }
 </style>
 <title>Tabs</title>
 </head>
 <body>
 <div style="width:600px;">
 <?php tabs_start(); ?>
 <?php tab('tab one'); ?>
 The first tab.
 <?php tab('tab two'); ?>
 The second tab.
 <?php tabs_end(); ?>
 </div>
 </body>
 </html>

Save the code as index.php.

Code:

<?php
 $tabs = array();
 function tabs_start()
 {
   ob_start();
 }
 function endtab()
 {
   global $tabs;
   $text = ob_get_clean();
   $tabs[count($tabs) - 1]['text'] = $text;
   ob_start();
 }
 function tab($title)
 {
   global $tabs;
   if(count($tabs) > 0)
   {
    endtab();
   }
   $tabs[] = array('title' => $title, 'text'=> '');
 }
 function tabs_end()
 {
   global $tabs;
   endtab();
   ob_end_clean();
   $index = 0;
   if($_GET['tabindex'])
   {
     $index = $_GET['tabindex'];
   }
?>
 <table width="100%" cellspacing="0" cellpadding="0">
 <tr>
 <?php
 $baseuri = $_SERVER['REQUEST_URI'];
 $baseuri = preg_replace("/\?.*$/", "", $baseuri);
 $curindex = 0;
 foreach($tabs as $tab)
 {
   $class = "tab";
   if($index == $curindex)
   {
     $class = "tab-active";
   }
?>
  <td class="<?=$class?>">
  <a href="<?php echo $baseuri."?tabindex=".$curindex; ?>">
  <?=$tab['title']?>
  </a>
  </td>
 <?php
  $curindex++;
 }
 ?>
 </tr>
 <tr><td class="tab-content" colspan="<?php echo(count($tabs) + 1); ?>">
 <?php echo $tabs[$index]['text']; ?>
 </td>
 </tr>
 </table>
 <?php
 }
 ?>

Save the code as tabs.php.

admin PHP

Leave a Reply

You must be logged in to post a comment.