Christophe’s Easy Tabs at Path to SharePoint

That Christophe guy over at Path to SharePoint never rests!  I just spotted his post on his new Easy Tabs Web Part.  I haven’t dug under the covers on it yet, but Christophe’s stuff is always nice.

The Easy Tabs Web Part is a Content Editor Web Part with some JavaScript. When added to a Web Part zone, the script identifies all the Web Parts that are present in the zone. For each visible Web Part it creates a tab named after the Web Part title.

The look and feel of the tabs match the theme of the site.

EasyTabs

UPDATE 2009-05-26: I did some fiddling with this today, and it is really slick, and so elegant in its simplicity!

Similar Posts

13 Comments

  1. Hi Christophe,

    I tried using the EasyTabs_Bis, but not sure how to use it. Can you give an example or demonstrate how to use it? I used it and it didn’t add a second row of tabs.

    Thank you.

  2. Hey Marc,

    It is working fine. Thanks a lot. But I would like to change the tabs style as per my requirement. How can I apply the CSS for tabs.

    1. Well, that’s sort of an exercise left to the reader. ;+) Use a DOM inspector like the IE8 Developer Tools to look at the CSS classes and adjust accordingly. In one instance where I’ve used the Easy Tabs, my DOM looks like this:

      <TD id=EasyTabs class=ms-siteactionsmenu>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ1 class=ms-tabselected>Case Studies</SPAN>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ4 class=ms-tabinactive>Public-Facing Web Sites</SPAN>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ2 class=ms-tabinactive>Client Endorsements</SPAN>
      </TD>
      

      M.

  3. Hello Marc,

    Following line of script which works in SharePoint2010 is not working in Sharepoint2016.

    This is ffrom Easytab.JS file.

    url = “/Lists/Mylist/” + $(this).attr(‘projtype’) + “.aspx?FilterField1=CustNum&FilterValue1=” + $(this).attr(‘cust’);

    ANy help would be highly apprictaied !!

    1. @Tamil:

      You’re looking at a blog post from 2009, so a lot has changed since then. The DOM elements in 2016 are significantly different than they were in 2010. In fact, my post was probably written in the 2007 days!

      If you are truly interested in sing EasyTabs, I’d suggest you get in touch with Christophe.

      M.

  4. How to have a link to a specific tab. For example if I have to send a link of SharePoint page to users then they see all the tabs. Is there any possibility that I can send them the link to a specific tab ?
    Thanks for your help in advance.

      1. Hi Marc,

        Thanks a lot for reaching out to me.

        I am using SharePoint 2016. Is there any possibility on this version ?

        Thanks &Regards,
        Imran

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.