The reason that I'm bothering putting any work into my own tabbing solution is that I'm more of a hobby hacker than a professional developer and I like to come up with solutions that don't require a great deal of ... shall we say ... coordination with third-parties. I'm unclear as to the privilege requirements needed to use Christophe's Easy Tabs Web Part, but I know that if I can add a web part to a page, I can implement this code without having to ask an admin to install anything for me.
So here's an example of what you'll end up with after pasting the code below into a Content Editor Web Part. And here's the code:<span id='skip_this'></span>Enjoy!
<style type='text/css'>
.tab {
float:left;
color:darkgray;
margin:0px 3px -1px 3px;
padding:0px 3px -1px 3px;
border:1px black solid;
border-bottom:1px white solid;
font-size:1.5em;
cursor:pointer;
}
.actTab {
float:left;
font-size:1.5em;
margin:0px 3px -2px 3px;
padding:0px 3px -2px 3px;
border:1px black solid;
border-top:2px black solid;
border-bottom:2px white solid;
cursor:pointer;
position:relative;
z-index:10;
}
</style>
<div id='wpFrame' style='height:100%;width:100%;background:;'>
<div id='wpTabs' style='width:100%;background:;float:left;'>
</div>
<div id='wpBody' style='width:100%;border:1px black solid;float:left;'>
</div>
</div>
<script type="text/javascript">
// This will check to see if the page is not being edited, collect all the Web Parts on the page and put them in the Tab Format
// Also, you may specify, by Web Part Title, which Web Parts you would like to exclude from the Tab Format.
if (!document.getElementById("ctl00_WSSDesignConsole_IdDesignModeConsole_DesignModeContainer")) {
_spBodyOnLoadFunctionNames.push("setupTabs");
var webTabs=[];
var webParts=[];
var wpsToSkip=[''];
}
function setupTabs() {
var theTDs = document.getElementsByTagName('TD'); // collect all the TDs on the page
var wpTabs = document.getElementById('wpTabs'); // the DIV where the tabs will be added
var wpBody = document.getElementById('wpBody') // the DIV where the Web Part content will be added
for (var t=0;t<theTDs.length;t++) { // loop through all the TDs on the page
var i = theTDs[t].id;
if (i.match(/WebPartTitleWPQ/)) { // if it's a Web Part
var title = (theTDs[t].innerText || theTDs[t].textContent).replace(/[\n\r]/g,"");
i = i.substr(i.indexOf("WPQ"));
var wpBod = document.getElementById("WebPart"+i);
if (wpsToSkip.join().match(title) || // skip Web Parts that have been excluded
wpBod.firstChild.id == 'skip_this') { // skip the CEWP that holds this code
continue; // skip it
} else {
wpsToSkip.push(title); // add the Web Part being incorporated to the skip list to prevent duplication
}
// build a tab for the Web Part
var newTab = document.createElement("DIV");
newTab.innerHTML = title;
newTab.className = 'ms-WPTitle tab';
newTab.id = i;
addEv(newTab);
wpTabs.appendChild(newTab);
webTabs.push(newTab);
// incorporate the body into the tabbed display
wpBody.appendChild(wpBod);
wpBod.style.display = "none";
webParts.push(wpBod);
document.getElementById("MSOZoneCell_WebPart"+i).style.display = "none";
}
}
}
function showHide() {
var i = event.srcElement.id;
for (var t=0;t<webTabs.length;t++) { // bring the proper tab to the front
webTabs[t].className = (webTabs[t].id.match(i)) ? "ms-WPTitle actTab" : "ms-WPTitle tab";
}
for (var w=0;w<webParts.length;w++) { // display the body element for the tab selected & hide the rest
webParts[w].style.display = (webParts[w].id.match(i)) ? "" : "none";
}
}
function addEv(o) {
if (o.addEventListener) {
o.addEventListener("click",showHide,false);
} else if (o.attachEvent) {
o.attachEvent("onclick",showHide);
} else {
o.onclick = showHide;
}
return o;
}
</script>
friendfeed
linkedin
skype
identi.ca
twitter
utterli
plurk
brightkite
facebook