Adding a Tabbed View to A Web Part Page Using jQueryUI

Sometimes I work on something and blindly stumble into a neat trick. The other day I was trying to figure out how to reliably add a tabbed view to a SharePoint Web Part Page. I was working in SharePoint Designer, so I had total freedom to try whatever I wanted.

The idea was to show a set of tabs, each of which could contain at least a Content Editor Web Part (CEWP) initially. We wanted it to look something like this:

Aside: Wireframes drive me a little batty because they turn into the goal rather than just a useful development tool. Mock ups like this using something like Balsamiq make far more sense to me. The Comic Sans makes it very clear to everyone that this is the basic idea, and we’re not talking about pixel placement.

My first thought was of course to use Christophe Humbert’s most excellent Easy Tabs, but for some reason that wasn’t working in the page. Since we’re already using jQueryUI for some other things – this is a highly customized environment – I figured that it would be a good alternative and would probably give me more control of the display.

If you look at the jQueryUI documentation, you’ll see that there is some specific markup required to get the .tabs() widget to function:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Once you have that basic markup in place, you can make this simple call to activate the tabs:

$("#tabs").tabs();

There are multiple options, of course, but that gets you the basics.

I tried a number of things, but the main difficulty I had was that Web Part Zones cannot contain markup; they can only contain Web Parts. SharePoint Designer strips out any markup that you add manually inside a Web Part Zone.

Somehow I thought of trying to wrap the Web Part Zone with the markup I needed to make the tabs work instead. Even better, each tab could have its own Web Part Zone so that we could edit existing Web Parts and add new Web Parts to the tabs at will. That markup ended up like this:

<div id="team-tabs">
  <ul>
    <li><a href="#tabs-how-we-help">How we can help</a></li>
    <li><a href="#tabs-case-studies">Case studies</a></li>
    <li><a href="#tabs-projects">Current projects</a></li>
    <li><a href="#tabs-applications">Applications we support</a></li>
  </ul>
  <div id="tabs-how-we-help">
    <WebPartPages:WebPartZone runat="server" Title="loc:HowWeHelp" ID="HowWeHelp" FrameType="TitleBarOnly"><ZoneTemplate>
    </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  <div id="tabs-case-studies">
    <WebPartPages:WebPartZone runat="server" Title="loc:CaseStudies" ID="CaseStudies" FrameType="TitleBarOnly"><ZoneTemplate>
    </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  <div id="tabs-projects">
    <WebPartPages:WebPartZone runat="server" Title="loc:Projects" ID="Projects" FrameType="TitleBarOnly"><ZoneTemplate>
    </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
  <div id="tabs-applications">
    <WebPartPages:WebPartZone runat="server" Title="loc:Applications" ID="Applications" FrameType="TitleBarOnly"><ZoneTemplate>
    </ZoneTemplate></WebPartPages:WebPartZone>
  </div>
</div>

This markup gives us this nice UI. I’ve blurred out the specific content in the CEWP, but you should get the idea.

The really nifty thing about all of this is that editing the content of each Web Part Zone seems to work just fine in the context of each tab. In other words, not only do we get the user experience (UX) goodness from the tabs for the end user, we also get it for the few people who will be editing the tab content.