<?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
*/
class SleekTabs {
var $tabs = array();
var $contentDiv;
var $ulclass = 'sleektabs-ul';
var $normalcss = 'sleektabs-normal';
var $selectedcss = 'sleektabs-selected';
var $usecache = true;
function SleekTabs($tabsToMake, $contentDiv) { // class constructor
$this->tabs = $tabsToMake;
$this->contentDiv = $contentDiv;
} // end class constructor
function makeJavaScript() {
?><script type="text/javascript">
<!--
var sleektabs_box;
var sleektabs_ajaxObject = false;
var sleektabs_cache = [];
var sleektabs_useCache = <?php echo $this->usecache ? 'true' : 'false';?>
function sleektabs_initialiseAjax() {
if (window.XMLHttpRequest) { // Mozilla, Safari, and other good browsers
sleektabs_ajaxObject = new XMLHttpRequest();
if (sleektabs_ajaxObject.overrideMimeType) {
sleektabs_ajaxObject.overrideMimeType('text/xml');
// ^ is for older Mozilla-based browsers
}
} else if (window.ActiveXObject) { // IE
try {
// IE has two methods of calling the object, typical!
sleektabs_ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
sleektabs_ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!sleektabs_ajaxObject) {
return false;
}
else {
return true;
}
} // end function
function sleektabs_tabSwitch(boxElement, urlToLoad, thisTab, otherTabs) {
if (!sleektabs_initialiseAjax()) {
// return true so browser navigates to fallback
return true;
}
sleektabs_box = boxElement;
// visually switch the tabs
// set all other tabs to the non-selected class
for (var i = 0; i < otherTabs.length; i++) {
//why does JavaScript not have foreach!!
document.getElementById(otherTabs[i]).className = '<?php echo $this->normalcss;?>';
}
// set this tab to selected
document.getElementById(thisTab).className = '<?php echo $this->selectedcss;?>';
// if caching is disabled or no cached tab available, load with Ajax
if (!sleektabs_useCache || !sleektabs_cache[thisTab]) {
document.getElementById(sleektabs_box).innerHTML = 'Loading...';
sleektabs_ajaxObject.onreadystatechange = function() {sleektabs_tabSwitch_response(thisTab);};
var newDate = new Date();
var queryMatch = new RegExp("\\?");
sleektabs_ajaxObject.open('GET', urlToLoad + (queryMatch.exec(urlToLoad) ? "&" : "?") + "__st_ts=" + newDate.getTime(), true);
sleektabs_ajaxObject.send(null);
return false; // returns false - the browser won't navigate to the fallback URL
} // end if
else {
// fetch from cache
document.getElementById(sleektabs_box).innerHTML = sleektabs_cache[thisTab];
return false; // returns false - the browser won't navigate to the fallback URL
} // end else
} // end function
function sleektabs_tabSwitch_response(thisTab) {
if (sleektabs_ajaxObject.readyState == 4) {
if (sleektabs_ajaxObject.status == 200) {
document.getElementById(sleektabs_box).innerHTML = sleektabs_ajaxObject.responseText;
// if caching is enabled, add this tab to our local cache
if (sleektabs_useCache) {
sleektabs_cache[thisTab] = sleektabs_ajaxObject.responseText;
}
box = false;
}
else {
alert('Loading the tab failed. Error code ' + sleektabs_ajaxObject.status);
return false;
}
}
}
<?php
foreach($this->tabs as $tab) {
?>function sleektabs_<?php echo $tab['name'];?>_tabClick() {
return sleektabs_tabSwitch('<?php echo $this->contentDiv;?>', '<?php echo $tab['ajaxurl'];?>', '<?php echo $tab['name'];?>', [<?php
// get id's of all other tabs and put into the array for the JS call
foreach($this->tabs as $tab2) {
//gives format'music-infobox-youmightlike','music-infobox-favoritedby'
echo '\''.$tab2['name'].'\'';
if (end($this->tabs) != $tab2) // if we are not at the last one
{
echo ','; // give JavaScript a comma for the next element
}
} // end foreach
?>]);
} // end tabs_<?php echo $tab['name'];?>_tabClick()
<?php
} // next $tab
?>//-->
</script><?php
} // end makeJavaScript()
function makeCSS() {
?>
<style type="text/css">
.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-bottom: 1px solid #302717;
background-color: #05BCFF;
padding: 4px 5px 5px 5px;
}
.sleektabs-selected {
list-style-type: none;
float: left;
height: 15px;
margin:0;
margin-right: 10px;
cursor: default;
border-bottom: 1px solid #F3E8AD !important;
background-color: #2697E2 !important;
padding: 4px 5px 5px 5px;
}
#sleektabs-content {
width: 242px;
height: 176px;
position: relative;
top: 10px;
left: 10px;
overflow: auto;
clear: both;
font-family: arial, sans-serif;
font-size: 13px;
padding-right: 5px;
background-color: #54CCFF;
margin:0;
padding:0
}
#sleektabs-wrapper {
margin:0;
padding:0;
}
#sleektabs-wrapper div {
margin:0;
padding:0;
}
</style>
<?php
} // end makeCSS()
function drawTabs($selectedtabname) {
?><ul id="<?php echo $this->ulclass;?>">
<?php
foreach($this->tabs as $tab) {
?><li class="<?php
if ($selectedtabname == $tab['name']) {
echo $this->selectedcss;
}
else {
echo $this->normalcss;
}
?>" id="<?php echo $tab['name'];?>">
<a href="<?php echo $tab['fallbackurl'];?>" onclick="return sleektabs_<?php echo $tab['name'];?>_tabClick();">
<?php echo $tab['friendlyname'];?>
</a>
</li><?php
echo "\n";
}
?>
</ul><?php
} // end drawTabs()
}; // end class
?>
|
Download
