Location: PHPKode > scripts > SleekTabs > index.php
<?php
/*
SleekTabs
Copyright (C) 2007 Peter Upfold. Portions copyright (C) 2007 Richard Fitzgerald.
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

 * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 * Neither the name of the Peter Upfold nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

http://peter.upfold.org.uk/projects/sleektabs
peter AT upfold.org.uk
*/

/**********************************************************************************************

This is an example implementation of SleekTabs, with two tabs of static content implemented as
simple PHP strings.

The comments in this example file should walk you through what is going on.

***********************************************************************************************/


// These strings are the actual tab contents. They may be replaced with other content
// or generated dynamically.
$tab1Content = "This is the first tab.";
$tab2Content = "This is the second tab.";


// This is the Ajax interface for the tabs. When a browser requests this page with ?page=tab1
// or ?page=tab2 as the query string, the tab content alone is sent back to the browser and then the
// script stops executing. The JavaScript at the client end then puts that retrieved tab content into the box
// on the page.
		
// Thus, when index.php?page=tab1 is requested, "This is the first tab" is sent back. No extra HTML or any other
// formatting information is sent, just the tab content which is then used to fill the div at runtime.

if (!empty($_GET['page']) AND empty($_GET['njs'])) {
	
	// $_GET['njs'] in this example is a variable used to prevent this loop being entered and is
	// used in the case that we want to use the non-Ajax fallback. We'll see that in action later.

	// We use a simple switch statement here to work out what tab was requested, echo the content and quit the script.
	switch ($_GET['page']) {

		case 'tab1':
			echo $tab1Content;
		die();
		break;

		case 'tab2':
			echo $tab2Content;
		die();
		break;


	}

}

// After this point, we have determined that the request is for the whole page, not
// just a single tab, so you can add things like HTML headers etc here.

require_once('sleektabs.php'); // We require sleektabs.php so we can call upon it.

?>
	<!-- ===================================
	If you're viewing the source of this page in a web browser at the moment, it's probably better to open up the PHP file
	to see all of the comments which walk you through this example. 
	     =================================== -->
		
<!-- Here we create the SleekTabs wrapper div, in which all the tabs are created. -->
<div id="sleektabs-wrapper"><?php
		
// The array coming up - $tabs - contains all the information SleekTabs requries to generate the code.
// Let's take a look at it. It is a two dimensional array, with the first index being a number
// for the tab and the second index being one of the following:
		
/*
name - an internal name used in the JavaScript. Must be code-safe, i.e. no spaces or other weird chars.

friendlyname - the name of the tab as it appears to the user on the tab button itself.

ajaxurl - the URL that will be retrieved when the user clicks the tab. In this case, we call this
document, with the special argument ?page=tab1 we set up earlier. See line 43 for the implementation
of that code.

fallbackurl - the URL that will be browsed to when the user clicks the tab and JavaScript is not
available. This URL should load the same page we're on, but preload the required tab's content into
the div statically. See later for an implementation of this.
*/

$tabs[0]['name'] = 'tab1';
$tabs[0]['friendlyname'] = 'Tab 1';
$tabs[0]['ajaxurl'] = './?page=tab1';
$tabs[0]['fallbackurl'] = './?page=tab1&njs=1';
$tabs[1]['name'] = 'tab2';
$tabs[1]['friendlyname'] = 'Tab 2';
$tabs[1]['ajaxurl'] = './?page=tab2';
$tabs[1]['fallbackurl'] = './?page=tab2&njs=1';


// Instantiate a SleekTabs class, passing in our array of tabs and the name of the div we want
// the content to be placed.
$sltabs = new SleekTabs($tabs, 'sleektabs-content');
$sltabs->contentDiv = 'sleektabs-content';

// In this example, our content is static, so it's fine to enable local JavaScript caching.
$sltabs->usecache = true;

// Call makeJavaScript() to generate the JS required and print it to the browser output.
$sltabs->makeJavaScript();

// Call makeCSS() to generate the CSS styles for the tabs and print them to browser output.
$sltabs->makeCSS();

// Finally, draw the tabs themselves. The argument here is the name of the tab that should be
// visually marked as 'selected' initially.
$sltabs->drawTabs('tab1');

?>
<!-- This is the content div, i.e. where the tab content will actually be placed once retrieved. -->
		
<div id="sleektabs-content">
<?php
	// Now when the user clicks a tab, the contents of this div will be overwritten with whatever
	// is retrieved from the Ajax URL.
		
	// However, if the user has browsed to the fallback URL, we need to preload this div with the
	// requested content manually and statically. That is why we have the same switch loop here as
	// we had up starting near line 43.
		
	switch ($_GET['page']) {
	
	case 'tab1':
		echo $tab1Content;
	break;
	case 'tab2':
		echo $tab2Content;
	break;
	
	// We also add a default statement here to automatically load the first tab's content statically.
	// Without this step, no tab would be selected by default and the div would be blank.
	default:
		echo $tab1Content;
	break;
}
?>
</div>
</div>
<!-- And we're done! Questions, comments, suggestions - http://peter.upfold.org.uk/contact. Thanks. -->
Return current item: SleekTabs