Dec

21

PHP Tabbed Views

December 21, 2007 |

Sometimes there is just too much data to put onto one web page. We can write a PHP script to enable developers to create navigable tabbed views of content. Below is the sample code to show my favorite Irish music artist Van Morrison’s three most important albums using tabs. (I know each of these materpieces deserves an entire page, but for the demo purpose, let’s just squeeze them together.) First let’s build the content page, index.php. 

<?php
require_once('tabs.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<?php tabs_header(); ?>
</head>
<body>
<div style="width:600px;">
<?php tabs_start(); ?>
<?php tab('Astral Weeks'); ?>
<p>Astral Weeks is a...release.</p>
<?php tab('Moondance'); ?>
<p>Moondance is the third solo album by Northern Irish singer...and even jazz (most obviously on the title track).</p>
<?php tab('Saint Dominic\'s Preview'); ?>
<p>Saint Dominic's Preview is an album by Northern Irish singer...songwriter genre.</p>
<?php tabs_end(); ?>
</div>
</body>
</html>

Now let’s build the module (component) tabs.php that controls it. 

<?php
$tabs = array();
function tabs_header() {
?>
<style type="text/css">
a {
text-decoration:none;
color:#3399FF;
}
.tab {
border-bottom: 1px solid #3399FF;
text-align: center;
font-family: Verdana;}

.tab-active {
border-left: 1px solid #3399FF;
border-top: 1px solid #3399FF;
border-right: 1px solid #3399FF;
text-align: center;
font-family: Verdana;
font-weight: bold;}

.tab-content {
padding: 5px;
border-left: 1px solid #3399FF;
border-right: 1px solid #3399FF;
border-bottom: 1px solid #3399FF;}

</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 class="<?php echo($class); ?>">
<a href="<?php echo( $baseuri."?tabindex=".$curindex ); ?>">
<?php echo( $tab['title'] ); ?>
</a>
</td>
<?php
$curindex += 1;
}
?>
</tr>
<tr><td class="tab-content" colspan="<?php echo( count( $tabs ) + 1 ); ?>">
<?php echo( $tabs[$index ]['text'] ); ?>
</td></tr>
</table>
<?php
}
?>

A demo page can be seen at:
http://www.lab.highub.com/php/tabview/

download source code

Take note there is one flaw of this script, it’s not search engine friendly, for example, by clicking on the second tab, the uri ends with: tabindex=1.

This is just a demo of using PHP to program tabView, please modify it before using it for serious business.



Similar Posts

Comments

Name (required)

Email (required)

Website

Speak your mind

Sponsors




Links