The base code was taken from here:
http://www.alistapart.com/articles/slidingdoors/
[ have not finished the force default part yet but that will be done soon. You can add it yourself also. ;-)
I will better describe what is going on here later. For now, just have fun making it work for you. Once you get it working, you will find it super easy to make tabs in your application.
Oh yeah, there are probably bugs too! I will be updating this code shortly.
Feel free to use this however you want. Consider it open sourced. You will probably have better karma if you mention I wrote it in your code somewhere. Nobody wants bad karma. I'll leave that up to you.
<?php
// Put this in the start of your application
if( !isset($_SESSION) ) {
session_start();
}
if( isset($_GET['tabpersistance']) && $_GET['tabpersistance'] == 1 ) {
if( isset($_GET['tab']) ) {
list($tabgrp, $tab) = split(':', $_GET['tab']);
$_SESSION['tabs'][$tabgrp] = $tab;
// We are done here just need to set the session var
// This is AJAX'ish
exit(0);
}
}
class ybt_TabSet {
private $tabSetName = '';
private $tabSetWidth = 350;
private $tabs = array();
public function __construct($name, $width=350) {
$this->tabSetName = $name;
$this->tabSetWidth = $width;
}
public function addTab($name, $title, $content='', $default = '', $forceDefault=false) {
if( $default == '' ) {
if( isset($_SESSION['tabs'][$this->tabSetName]) && $_SESSION['tabs'][$this->tabSetName] == $name ) {
for( $i=0; $i < count($this->tabs); $i++ ) {
$this->tabs[$i]['tabdefault'] = false;
}
$default = true;
}
}
$this->tabs[] = array('tabname' => $name, 'tabtitle' => $title, 'tabcontent' => $content, 'tabdefault' => $default);
}
public function __tostring() {
$outHTML = '';
$outHTML .= '<div class="tabcontainer" style="width: '.$this->tabSetWidth.'px;">
<div class="tabelement">
<ul id="'.$this->tabSetName.'">';
foreach( $this->tabs as $tab ) {
$outHTML .= " <li id=\"".
$tab['tabname'].
"\" class=\"".
($tab['tabdefault'] ? 'curtab ' : '') .
$this->tabSetName."\"><a href=\"#\" onClick=\"return showTab('".
$tab['tabname'].
"', '".
$this->tabSetName."');\">".
$tab['tabtitle'].
"</a></li>";
}
$outHTML .= ' </ul>
</div>';
foreach( $this->tabs as $tab ) {
$outHTML .= '<div class="tabbody '.$this->tabSetName.'body" id="'.$tab['tabname'].'body" '.($tab['tabdefault'] ? '' : ' style="display: none;"').'>';
$outHTML .= $tab['tabcontent'];
$outHTML .= '</div>';
}
$outHTML .= '</div>';
return $outHTML;
}
}
?>
Here is the Javascript
////////////////////////////////////////////////////////////////////////
// These functions are for the tabs UI elements
function showTab(tabid, tabGrpClass) {
var theTabBody = document.getElementById(tabid + 'body');
var theTab = document.getElementById(tabid);
var theCurTab = getElementsByClassName('curtab ' + tabGrpClass, 'li', document);
var theRest = getElementsByClassName('tabbody ' + tabGrpClass + 'body', 'div', document);
for(var i=0; i<theCurTab.length; i++){
theCurTab.className = tabGrpClass;
}
for(var i=0; i<theRest.length; i++){
theRest.style.display = 'none';
}
theTab.className = 'curtab ' + tabGrpClass;
theTabBody.style.display = '';
// Send current tab to server for session tab persistance
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
searchReq.open("POST", 'index.php?tabpersistance=1&tab='+ tabGrpClass +':'+ tabid, true);
searchReq.onreadystatechange = handleTabResponse;
searchReq.send(null);
}
return false;
}
function handleTabResponse() {
// Do nothing
//if (searchReq.readyState == 4) {
// alert(searchReq.responseText); // for testing
//}
}
// This function was borrowed from here:
// http://www.robertnyman.com/2005/11/07/t ... classname/
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements;
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}
//Our XmlHttpRequest object to have tab persistance
var searchReq = getXmlHttpRequestObject();
To use this class simply instanciate a ybt_TabSet class, add tabs to it and print. Like this!
$myTabs = new ybt_TabSet('tabsetname', 600);
$myTabs->addTab( 'one', 'Tab 1', '<h4>Some Content 1</h4>', true);
$myTabs->addTab( 'two', 'Tab 2', '<h4>Some Content 2</h4>');
$myTabs->addTab( 'three', 'Tab 3', '<h4>Some Content 3</h4>');
echo $myTabs;
Here is the CSS styles I am using:
.tabelement { float:left;
/*width: 350px;*/
width: 100%;
}
.tabelement ul { margin:0;
padding: 10px 10px 0;
list-style:none;
}
.tabelement li { float:left;
margin:0;
padding: 0 0px 0 9px;
}
.tabelement a { display:block;
padding: 3px 15px 3px 6px;
text-decoration:none;
font-weight:bold;
cursor: default;
/*background-color: #fee;
border-color: blue;
border-width: 1px 1px 0px 1px;
border-style: solid; */
}
.tabbody { /*border: 1px dashed green; */
border: 1px solid #000;
border-top: none;
background-color: #efe;
padding: 10px;
/*width: 328px;*/
clear: both;
}
.tabcontainer { margin: 20px;
}
.tabelement .curtab a {
padding-bottom: 4px; }
/* looks of the tabs */
.tabelement { font-size:85%;
background: url("../images/tabs/bg.png") repeat-x bottom;
line-height:normal;
}
.tabelement li { background:url("../images/tabs/left.gif") no-repeat left top;
}
.tabelement a { background:url("../images/tabs/right.gif") no-repeat right top;
color:#654;
}
.tabelement a:hover { color:#222;
}
.tabelement .curtab { background-image:url("../images/tabs/left_on.gif");
}
.tabelement .curtab a { background-image:url("../images/tabs/right_on.gif");
color:#222;
}
[ add comment ] ( 375 views ) | permalink | ( 3 / 736 )
I just installed this blog system. Its pretty cool. I hope you will like it.
[ 2 comments ] ( 284 views ) | permalink | ( 3 / 1024 )