Hack6.Add Tabs to Your Web Interface | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 6. Add Tabs to Your Web Interface

Use HTML and CSS to create a tabbed interface for your web application.

Sometimes there is just too much data to put onto one web page. An easy way to break up a site (or even a content-heavy page) is to display it using tabs, where the data is broken up into subelements, each correlating to a named tab. Lucky for us, tabs are a piece of cake with PHP.

2.5.1. The Code

Save the code in Example 2-9 as index.php.

Example 2-9. Using the tabs library to show a tabbed interface

 <?php require_once("tabs.php"); ?> <html> <head> <?php tabs_header(); ?> </head> <body> <div style="width:600px;"> <?php tabs_start(); ?> <?php tab( "Tab one" ); ?> This is the first tab. <?php tab( "Tab two" ); ?> This is the second tab. <?php tabs_end(); ?> </div> </body> </html>

Next, code up a nice PHP and CSS library. Save the code in Example 2-10 as tabs.php.

Example 2-10. Using PHP and some CSS to create user-friendly tabs

 <?php $tabs = array(); function tabs_header() { ?> <style type="text/css"> .tab { border-bottom: 1px solid black; text-align: center; font-family: arial, verdana;   } .tab-active {  border-left: 1px solid black;  border-top: 1px solid black;  border-right: 1px solid black;  text-align: center;  font-family: arial, verdana;  font-weight: bold;   } .tab-content {  padding: 5px;  border-left: 1px solid black;  border-right: 1px solid black;  border-bottom: 1px solid black;   }  </style>  <?php } 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 > <a href="<?php echo( $baseuri."?tabindex=".$curindex ); ?>"> <?php echo( $tab['title'] ); ?> </a> </td> <?php $curindex += 1;  } ?> </tr> <tr><td  colspan="<?php echo( count( $tabs ) + 1 ); ?>"> <?php echo( $tabs[$index ]['text'] ); ?> </td></tr> </table> <?php } ?>

I designed the API on this tabs system to make it easy to create tabs in your document. It starts with invoking tabs_header in the header section of the document. This will set up the CSS for the tabs. Then, within the body, the call to tabs_start sets up the tab system. Each new tab starts with a call to tab with the name of the tab. The call to tabs_end then ends the construction of the tabs.

Internally, the tabs system uses output buffering to hold onto the contents of each tab, and to display whichever tab is selected "on top."

2.5.2. Running the Hack

Upload the files to your PHP server and point your browser at index.php. You should see something close to Figure 2-8.

Figure 2-8. The first tab

Click on the second tab (labeled "Tab two"), and you will see the second tab selected and the contents of the second tab (as shown in Figure 2-9).

Figure 2-9. The second tab

Each time the user switches tabs, the page is reloaded. Using CSS and Dynamic HTML (DHTML) to create div tags with the content of each tab, and by manually controlling the visibility of the tabs, you can allow users to change tabs without a page refresh.

2.5.3. See Also

"Build a Breadcrumb Trail" [Hack #4]
"Create Dynamic Navigation Menus" [Hack #17]