SharePoint pages: add tabs in a snap!

Christophe – this looks very interesting! I am amazed at the creativity of some. I have followed your instructions to implement tabs but I am not getting the result I expect.

When in site settings – exit mode I can see the tabs with the names of my web parts. However, when I exit edit mode I do not see the tabs..my web parts are the same as they were before I attempted to install the Tabs??

I am sure I missed something here but it is not coming to me yet. Any ideas?

Thank you.

In one default.aspx page you cannot have two easy tab in different Web part zones

Hi Christophe.

The Javascript works great as built. Could I propose something I would love to see as an enhancement:

A way of nominating which wep parts in the current zone are to be rendered as tabs – This could be an “Inclusion array” or an “Exclusion Array” (the exclusion array would probably be shorter).

You might have to use the Webpart titles (as the position might change). You may also need to position the tabs at the same level as the Easy tabs web part, so you could position the tabs say between other web parts (at the moment I think it runs at the top of the Zone).

The Tabs point to CSS in the Core.css file. The ones that I amended were ms-tabselected and ms-tabselected. For myself I have assigned another custom CSS file to my master pages. I copied the TAB CSS out of the core.css and pasted them into my custom css file.

I then renamed them as per the examples below. All you then have do do is edit the tabs webpart to point at the new css names.

.sth-tabselected{border-color:#DDDDDD;border-width:1px;border-style:solid;font-weight:bold;position:relative;top:0px;padding-top:7px;padding-bottom:7px;padding-left:10px;padding-right:10px;color:#194C80;background-repeat:repeat-x;background-color:#E8E8E8;margin-right:5px}

.sth-tabinactive{position:relative;top:0px;padding-top:7px;padding-bottom:7px;padding-left:10px;padding-right:10px;color:#194C80;background-color:#F2F2F2;background-repeat:repeat-x;border:solid 1px #DDDDDD;margin-right:5px}

Thought I would share a slight addition to the EasyTabs. I needed the ability to have a hyperlink to the SP site that would automatically display the appropriate Tab. So I added a couple of lines to the Javascript to accomodate this.
This script modification looks for the Anchor Tag Hash “#” in the url.
If it exists then display that tabby setting the SetCookie function Christophe added.
Here is the javascript code modified.
————————————

/* Easy Tabs for Web Part pages – v 2.0
Christophe Humbert
Christophe@PathToSharePoint.com */

var TabCookie = “TabCookie” + window.location.pathname;

function GetParentTable(elem)
{
while(elem !=null && elem.tagName !=”TABLE”) elem=elem.parentNode;
return elem;
}

function activateTab(selectedtab)
{
if (WPzone.id != “MSOZone”)
{
var allTabs = document.getElementById(“EasyTabs”).getElementsByTagName(“SPAN”);
for (i=0;i<allTabs.length;i++)
{
var WPCellID = allTabs[i].id.replace(/tab/,"MSOZoneCell_");
var TitleID = allTabs[i].id.replace(/tabWebPartWPQ/,"WebPartTitleWPQ");
if (allTabs[i] == selectedtab)
{
allTabs[i].className = "ms-tabselected";
document.getElementById(WPCellID).parentNode.style.display = "";
document.getElementById(TitleID).parentNode.style.display = "none";
}
else
{
allTabs[i].className = "ms-tabinactive";
document.getElementById(WPCellID).parentNode.style.display = "none";
}
}
}
}

function BuildEasyTabs()
{

var TabsTD = document.createElement("TD");
TabsTD.className = "ms-siteactionsmenu";
TabsTD.id = "EasyTabs";

var SeparatorTD = document.createElement("TD");
SeparatorTD.style.height = "5px";
SeparatorTD.className = "ms-pagetitleareaframe";

var theDIVs = WPzone.getElementsByTagName("DIV");
for (i=0;i’-1′)
{
var urlAnchor = pageUrl.substr(pageUrl.indexOf(‘#’)+1, pageUrl.length).replace(/%20/gi, ” “);
if (urlAnchor.indexOf(‘?’)>’-1′){urlAnchor = pageUrl.substr(pageUrl.indexOf(‘#’)+1, urlAnchor.indexOf(‘?’));}
}
//End Section added by B.J. Davis

Easy Tabs for Web Part pages – v 2.0
Christophe Humbert
Christophe@PathToSharePoint.com
- This WebPart should be set to Hidden.
– Select Modify Webpart.
– Layout
– Make sure there is a checkmark the Hidden Checkbox.

————————————

Christophe, The best service made to me by Google was leading me to Paths…

EasyTabs is working well for me, and am ready to expand my use, but I am becoming sensitive to features and version… I note that you have posted the new EasyTabs Customization Guide. In both the title of the guide, and on page 11, you reference EasyTabs “v3.” (“… The Easy Tabs won’t find the title and will ignore the Web Part (new in v3).”)

The version of the two downloads are “2.0.” Will there be a “v3″ coming?

R’grds – Ben.
P.S.: Have adopted most of your Calendar toolbox, folks think I am a hero, I think you are a hero!

As part of my additional styling elements for a custom CSS, I modifed a few of the tags below and it helped me craft an improved customized tab appearance to match my custom masterpage. However, I can’t figure out what is forcing the spacing between the tabs and the tab body. Any hints?

>>> This puts a box around the web parts with a thin grey line
———————————————————————————
.ms-WPBorder,.ms-WPBorderBorderOnly {
border-width:1px;
border-style:solid;
border-color:#cccccc;
padding:10px 12px 12px 12px;
}
.ms-WPBorder
{
border-top-width:0px;
———————————————————————————-

>>> This formats the tabs
———————————————————————————-
.ms-tabinactive
{
font-weight:normal;
position:relative;
top:0px;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
border-bottom:none;
background-color:#cccccc;
background-image:url(“>>insert your tab bg image here<<");
border:solid 1px #cccccc;
color:#666666;
}
.ms-tabinactive a:link
{
color: #666666;
text-decoration:none;
}
.ms-tabinactive a:hover
{
color: #000000;
text-decoration:none;
}
.ms-tabinactive a:visited
{
color:#666666;
text-decoration:none;
}
——————————————————————-

Hi Chris,

Great work on the easy tabs, I have vistied your site over the past 2 years for ideas for a work site that I use. I have recently implemented your easy tabs for an excel dashboard I created.

In this dashboard you are able to drill down by clicking on a project to view certian information. The only problem I have is you have to hit the back button to refresh the “Projects tab” in order to go back to the chart. Is there a quick code in Java (sorry not a programmer) when you click on a tab it goes back to the main webpart?

Thanks in advance.

Ross

Hi Christophe, excellent work on EasyTabs web part. One question, do you have inputs as how to specify or groups multiple webparts (i.e. Announcements) into a single tab? Thanks!!

I am trying to get the Easy Tab to work in a Publishing page. I see the tabs created when I add the Web part, but when I exit edit view I do not see the tabs. I don’t understand why there is a difference. Has anyone seen this problem before?

Thanks

–

Dave