NOTE: This textual guide accompanies the video tutorial based around the Peter's Wonderful Widgets example site.

For those of you who don't know, SleekTabs is a program written in PHP that automates the process of making tabbed interfaces on web pages.

By a 'tabbed interface', I mean that SleekTabs can create a section on your web page with tab-style buttons at the top. When the user clicks a tab button, the section then reveals the content relating to that tab. I'm sure you're used to the concept of tabs in desktop applications.

If you really don't know what I mean, take a look at the example site we'll be hooking up in this tutorial.

In this tutorial, I am going to show you how to set up a box on a simple web page which has three tabs - Information, Contact and Products.

When we're done, the final web page will look like this - http://peter.upfold.org.uk/apps/sleektabstutorial/

On that page, you can click each of the tabs to flip between them. All the loading of content happens automatically, in the background, through SleekTabs' AJAX loading system.

To the user, it's quick, simple and they get the info they want without reloading the whole page, which can be frustrating and slow.

To you, the website developer, using SleekTabs means you don't have to do all that AJAX work, you simply instruct SleekTabs what to do and it builds the set of tabs.

First of all, download a copy of the example project as it is before SleekTabs is set up. You'll need to place this on a web server with PHP, so you can work through the tutorial.

The example project should look just like the finished one you looked at earlier, but instead of the tabbed section, it's just a blank box!

Now, let's take a peek at the source code here. There are five files in the download - three of them are files for the tabs and contain what should appear on each tab, one is the stylesheet and the other, index.php is the main page.

Open index.php in your favourite code editor and let's take a look.

It's a pretty simple HTML document here - nothing particularly fancy. Notice these two divs:

<div id="tabbedsection">
<!-- put sleektabs setup code here -->
</div><br />
<div id="sleektabs-content">
<!-- put preload tab content here -->
</div>

The div with id tabbedsection is where the actual tabs that you click on will be rendered later. Let me reiterate - tabbedsection is where the physical buttons the user clicks on will appear, not the content.

sleektabs-content is where the tab content will appear. Through the CSS styling, these divs are made to look (relatively) pretty, so they look like a proper tabbed box.

The actual tab content is stored in the three files named after each tab - information.php, contact.php and products.php. Open up these files.

The important thing to notice here is that these files are bare. There is no starting html tag, no head or body. You only put in these files exactly what you want to appear inside the div.

If you put a whole HTML document in itself in here, then your layout will probably break and other bad things are likely to happen later on.

The stylesheet is important for one major reason. SleekTabs is designed so that you (or your friend who does all the design stuff) can fully customise and be in control of how SleekTabs looks to the user.

You are encouraged to build your own styles to make the tabs look how they should and fit into your site.

These are the SleekTabs styles used in this tutorial. I highly encourage you to copy them and modify them to suit how you want your tabs to look. Or make them completely yourself - just make sure you use the right names.

/* SleekTabs styles */
 
.sleektabs-ul {
 
	list-style-type: none;
	margin:0;
	padding:0
 
}
 
.sleektabs-normal {
	list-style-type: none;
	float: left;
	height: 15px;
	margin:0;
	margin-right: 10px;
	cursor: default;
	border:1px solid #0000ff;
	border-bottom: 1px solid #302717;
	background-color: rgb(176,255,214);
	padding: 4px 5px 5px 5px;
}
 
.sleektabs-selected {
	list-style-type: none;
	float: left;
	height: 15px;
	margin:0;
	margin-right: 10px;
	cursor: default;
	border:1px solid #f3e8ad;
	border-bottom: 1px solid #F3E8AD !important;
	background-color: #000070 !important;
	padding: 4px 5px 5px 5px;
	color:#ffffff;
}
 
.sleektabs-selected a {
	color:#ffffff;	
}
#sleektabs-content {
	width: 80%;
	height: 176px;
	position: relative;
	top: 0px;
	left: 35px;
	overflow: auto;
	clear: both;
	padding-right: 5px;
	background-color: #ffffff;
	border:1px solid #000070;
	margin:0;
	padding:10px;
}
 
#sleektabs-wrapper {
	margin:0;
	padding:0;
}
 
#sleektabs-wrapper div {
	margin:0;
	padding:0;
}

OK, so we have a wonderful little site here, and now you understand how it all works, or is meant to work. But we need to put SleekTabs into action.

Download SleekTabs and extract it (somewhere else for now, so you don't overwrite index.php in Wonderful Widgets with the one in the download).

Copy sleektabs.php (just that file) into your project directory, alongside our five existing files. We're now ready to plug in the code and get things started.

First of all, let's define the set of tabs. In index.php, add the following code at the tabbedsection div.

<div id="tabbedsection">
<?php
 
require('sleektabs.php');
 
$tabs[0]['name'] = 'information';
$tabs[0]['friendlyname'] = 'Information';
$tabs[0]['ajaxurl'] = 'information.php';
$tabs[0]['fallbackurl'] = $_SERVER['PHP_SELF'].'?load=information';
 
$tabs[1]['name'] = 'contact';
$tabs[1]['friendlyname'] = 'Contact';
$tabs[1]['ajaxurl'] = 'contact.php';
$tabs[1]['fallbackurl'] = $_SERVER['PHP_SELF'].'?load=contact';
 
$tabs[2]['name'] = 'products';
$tabs[2]['friendlyname'] = 'Products';
$tabs[2]['ajaxurl'] = 'products.php';
$tabs[2]['fallbackurl'] = $_SERVER['PHP_SELF'].'?load=products';
 
$sltabs = new SleekTabs($tabs, 'sleektabs-content');
 
$sltabs->usecache = true;
 
$sltabs->makeJavaScript();
 
//$sltabs->makeCSS(); // already done!
 
$sltabs->drawTabs('information');
 
?>
</div><br />

Don't just copy this code without understanding how it works. Let's delve into it.

First, we include (or require in this case) sleektabs.php, so we can use it.

Next, we define an array, called $tabs. This array holds all the information about the tabs we want to set up. Each tab is one element in the array ($tabs[0] is tab #1, $tabs[1] is tab #2 and so on). Each of those elements has four sub-elements, which are named as follows:

• name - this is the internal name used to refer to the tab. This mustn't contain spaces, special characters or anything else like that. Keep it simple, relevant and unambiguous.

• friendlyname - this name appears to the user on the top of the tab. All characters are allowed that are HTML-valid, however any special characters might need to be referred to with HTML entity syntax. For example, & would have to be & or é would have to be é.

• ajaxurl - this is the URL that SleekTabs will load when the tab is clicked. Whatever information is sent back to the browser from that URL will be placed inside the sleektabs-content div. Exactly as it is.

• fallbackurl - this is a URL that SleekTabs will make the browser go to if JavaScript is off, or the AJAX fails for some reason. Setting it up is beyond the scope of this particular tutorial.

You'll notice we set up our three tabs in this way, setting a name, friendlyname, ajaxurl and fallbackurl for each. Then, we move on.

The next thing we do is this line:

$sltabs = new SleekTabs($tabs, 'sleektabs-content');

This sets up a new SleekTabs object, which now holds all the tab information. We can call methods on this object to make SleekTabs do its work.

There are two arguments here. The first one passes in our array of tabs we set up. SleekTabs uses this so it knows what tabs you want. The second argument is the name of the SleekTabs content div (where you want the tab content to show up).

$sltabs->usecache = true;

SleekTabs implements a local caching system, where once the user has loaded a tab once, they can load it again without bothering the server. If your tabs contain static information, like in this example project, you can turn the cache on.

If you're using SleekTabs to display information that might change in the life of a pageload, or does some action, turn the cache off with false.

$sltabs->makeJavaScript();

This line makes SleekTabs print the JavaScript used to run the AJAX stuff to the page output. This stage must be somewhere before the end of the page. (If you want, you can do your tab setting up at the start and print the JS in the HTML head to clean things up. Just don't call drawTabs until you really are ready for them.)

//$sltabs->makeCSS(); // already done!

Notice this line is commented out. The reason for that is that we have already added the SleekTabs styles to our CSS stylesheet (and possibly customised them). You should only run this line if you haven't taken this step of adding SleekTabs CSS to your personal stylesheet.

$sltabs->drawTabs('information');

This line does the business - it prints the tabs to the browser output. The argument passed in here is the 'name' of the tab that you want to appear selected initially.

We're not quite done yet, but let's test what we have. Save index.php and browse to the example site.

You'll notice, if everything is done right, that the tabbed buttons are now visible in the browser. Clicking the tabs will load the relevant content into the content area.

There's a problem. OK, everything works fine when you click a tab. The problem is that initially, no content shows up, even though the 'Information' tab is set to be selected.

Let's fix that.

SleekTabs is only capable really of hooking up that AJAX goodness and making those tabs. At the moment, it can't actually put the 'default' tab's content in the right place by itself.

You need to 'include' or 'require' the default tab inside the sleektabs-content div. That way, when the user visits the page initially, the default tab's content is already waiting for them inside the div.

It's as simple as this:

<div id="sleektabs-content">
<?php
require('information.php');
?>
</div>

Save, go back and reload the page in your browser.

This time, the Information tab not only appears selected, but the content area shows the right information too. You can click the tabs and they work fully.

That's it! Well, almost…

SleekTabs at this point works. It is absolutely fine, provided the user has JavaScript, and AJAX works properly.

However, if for some reason JS or AJAX fail, or it's a search engine visiting or something, SleekTabs won't be able to do the AJAX, and the content won't be accessible.

It's for this reason the fallback URL exists. In a separate tutorial, I'll detail how to set this up in the same project (the video tutorial part 2 addresses this).

If you don't care about non-JS users, or non-AJAX users, you can just leave it here. I would recommend though that you spend some time working with the fallback for full compatibility with all clients.

Other than that, though, SleekTabs is implemented!