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.
I’m new at tabbed inserts, where do you place the code that points to jQuery?
Marie:
You can add the reference to the jQuery files in the master page, page layout, or in individual pages, depending on your specific needs.
M.
Hi Marc,
Great post.
What would you suggest if you weren’t referencing specific locations? For example,your li anchors point to a specific #ID. I’m working with SharePoint lists. Each item in the list contains an image and some text.
Now I can style the position of the image and text through XSLT and CSS, but my main issue is how to link to list items? Would it be dynamically based on the list item ID?
Ultimately, I want the end user to be able to update the list with a new item, and it’ll automatically create a new tab and content.
Any guidance here would be massively appreciated!
Matthew:
Check out my post
Setting Up a DVWP to Use jQueryUI Accordion and Tabs. Hopefully that will give you enough to go on. If not, search for ‘jQuery’ and ‘tabs’ and you’ll find a few other posts.
M.
Marc,
That worked like a charm!
Thank you for the rapid response.
Hi Marc,
I’m a newbie to development and have been trying recreate your tabbed view in Sharepoint 2007. The function call doesn’t seem to be working. I’ve added the following to a file I’m pointing to from Content Link in the web part.
$(function() {
$( “#tabs” ).tabs();
});
The jquery file is getting called because an alert I added is rendering. I’d appreciate any help you could give me.
Thanks in advance,
Norrie
Norrie:
The script you’ve posted is trying to select an element with id=tabs to convert that section of markup into the tabs. Your markup in that section has to adhere to the structure required by jQueryUI’s .tabs() function.
M.
Hi Marc, thanks a lot for your response. I was using your markup above to try to get it working initially. I’ve tried using $( “#team-tabs” ).tabs(); but with no success. Apologies for being so stupid about this!!
Norrie:
There are a number of things that could be going wrong. Are you sure that your references to jQuery, jQueryUI, and the jQueryUI CSS are correct?
M.
Hi Marc,
Thanks for your guidance above. I was missing the css file. I’ve added that and have succceeded in getting the tabs and headers showing. However I’m not getting the option to Add a Web Part in any of the tabs. Is there anything specific I should be doing to render those?
Norrie
Norrie:
If you’ve done exactly what I show, you should be able to put the page into edit mode, click the tab where you want to add a Web Part, then add it.
M.
Marc, this is a very usefil link. Thanks for posting. The tabs work very well but the web part zone is not coming? i just can see any…can you pls help…
L:
I’m not sure what you mean. What is the problem you are having?
M.
Marc I have inserted webpartzone in just one tab. when I click on that tab, its blank with no content, the rest of the tabs work fine with any type of content. i use jquery ui-1.7.2.
L:
It may be that you didn’t get the code for that Web Part Zone inserted into the tab’s div correctly. Hard to say.
M.
jQuery UI Tabs – Default functionality
/* */
/* $(function() { $( “#tabs” ).tabs(); }); */
$(function() {
$( “#tabs” ).tabs({
event: “mouseover”
});
});
Tab1
Tab2
Tab 3
Safety
tab 1 content
para3.
Thanks for your quick response, Am I missing anything?
L:
Coade gets stripped out in posts here, as you can see. If you want to post to a forum somewhere, I could take a look.
M.
If you provide an email, I can send it to you.
Marc, Does this method work with MOSS 2007? I can get the tabs to show, but I cannot get the webpartzone to show.
Brant:
I can’t think of a reason it wouldn’t off the top of my head. What happens when you put the page into edit mode?
M.
It appears the same way, the web part zone does not appear at all. I try to add a web part in edit mode and I can place it above the tabs or below the tabs, but not within the tabs. I am using IE9, not sure if this would make a difference either. I can provide lots of other information about the setup if need be.
I was really interested if you or any of the other readers have done this successfully in Sharepoint 2007…
Thanks for getting back to me right away, I am a big fan of your posts… I understand that many of this these implementations can be done server side, but it is so much more fun to implement them client side… keep up the good work.
Brant.
Put another way, should adding the webpartzone ‘code’ to the CEWP script automatically add the webpartzone to the sharepoint page? I saw many other posts where the had to go into Sharepoint Designer to add the webpartzone manually… I am thinking your way is better (on the fly).
Brant:
Aha. Now I see the issue. You can’t add Web Part Zones in a CEWP. They need to be right in the page itself, thus you have to use SharePoint Designer to add the markup.
M.
Ahhhh. That was my concern. My hope was to put all of the code in a CEWP and have the web part zones added dynamically. I was going to take the level of indirection one step further and put the web part zone information (“ID”, “Title”, etc.) in a list… then have the javascript pull the list values and add the web part zones dynamically. I will work outside the context of the CEWP and test further.
thanks again for taking the time to review my post.l
Hi, The code works well. But when I added a webpart inside the webpartzone, the jquery does not work. Any solution? Thanks
Pleaes let me know where is CSS class
I’m not sure what CSS class you’re referring to.
M.