WP Tabify: Transform a SharePoint Web Part Zone into Tabs
Guest Author: Kyle Schaeffer
KyleSchaeffer.com
I do quite a bit of design and implementation on the SharePoint platform. Today, I created a very handy little script that I think might be something worth sharing. I don’t often post anything so specific on my blog, but I found this to be extremely useful, and I hope you do too.
What is it?
This all started with a great idea from the mind of Matthew Koon. If you’re not familiar with SharePoint, one thing you can do in the platform is place web parts on a page, which are akin to sidebar widgets in WordPress or other CMS platforms. Web parts have a lot of nifty drag-and-drop functionality, but the appearance of them is pretty much limited to what you can do with a bit of CSS and maybe some background images. The script that I created transforms a particular “web part zone,” which contains individual web parts, into a jQuery UI tab control. For each web part in the zone, you see an interactive “tab” instead of a boring static box. The contents of each tab is the contents of the web part, itself.
What does it do?
When you’re editing a page, you’ll see this:
When you publish the page, you’ll see this:
1. Attach Required Scripts
You’ll need both jQuery 1.4.2 and jQuery UI 1.8.5 (or later).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
2. Attach the Script
Paste this into an attached JavaScript file:
(function($){
$.fn.wpTabify = function(){
if($('.ms-WPAddButton').size() == 0){
return this.each(function(i){
var tabList = $('<ul class="wpt-ui-tabs-nav"/>');
var panels = $('<div class="wpt-ui-tabs-wrapper"/>');
$(this).find('.s4-wpTopTable,td[id^="MSOZoneCell_"] > table').each(function(j){
$(tabList).append('<li><a href="#ui-tab-panel' + i + j + '">' + $(this).find('h3.ms-WPTitle').text() + '</a></li>');
var thisPanel = $('<div id="ui-tab-panel' + i + j + '" class="wpt-ui-tabs-panel"/>');
var panelContents = $(this).detach();
$(thisPanel).append($(panelContents).find('.ms-WPBody').html());
$(panels).append(thisPanel);
});
if($(tabList).find('li').size() > 0){
$(this).prepend(panels);
$(this).prepend(tabList);
$(this).tabs();
}
});
}
else{
return false;
}
};
})(jQuery);
3. Wrap Your Web Part Zone
In your custom page layout, place a <div/> tag around a web part zone, and give it a class name or ID of your choosing.
<div class="my-web-part-tabs"> <WebPartPages:WebPartZone id="zone1" runat="server" title="Tabs Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </div>
4. Run the Script
All that’s left is to run the jQuery plug-in, like so:
$(document).ready(function(){
$('.my-web-part-tabs').wpTabify();
});
5. Add Some Style (Optional)
You may choose to add a bit of style to your newly tabified web parts (this is not specific to this plug-in, these are just some generic jQuery tabs styles):
.ui-tabs-nav {
margin: 0;
padding: 0;
}
.ui-tabs-nav li {
list-style: none;
margin: 0 1px 0 0;
padding: 0;
float: left;
}
.ui-tabs-nav a {
position: relative;
top: 1px;
display: block;
padding: 10px 8px;
border: solid #e1e0dc;
border-width: 1px 1px 0 1px;
background: #d6d6d6;
color: #999;
text-decoration: none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ui-tabs-nav li.ui-tabs-selected a {
color: #c70d37;
background: #fff;
}
.ui-tabs-panel {
clear: both;
padding: 20px;
background: #fff;
border: 1px solid #e1e0dc;
}
.ui-tabs-hide {
display: none;
}
Compatibility
This has been tested in SharePoint 2007 and SharePoint 2010. Make sure to set your web part chrome to anything other than None, as my script relies on the web part title to display the tab title. Please let me know if you have any issues, as I will continue to update the script as needed. Good luck, and happy tabbing!
Guest Author: Kyle Schaeffer
KyleSchaeffer.com
Kyle is a designer, speaker, and blogger living in Williamsburg, Virginia. He is a Senior SharePoint Consultant at SusQtech, where he has years of experience creating and implementing user experiences on the SharePoint platform. An advocate of simple and elegant web design, Kyle shares lessons learned and best practices on his blog, KyleSchaeffer.com.
Awesome! Can’t wait to try it out! :-)
Thank you Kyle for sharing your tricks.
It’s funny to see that because one or two years ago, I already tried a similar approach of it, shared by Christophe from http://www.pathtosharepoint.com
This is a nice variant to one that I had done for a client! Thanks for taking the time to post it.
Kyle,
As Romain says, this technique has been around for a while. I published the first “Easy Tabs” in May 2009. You can grab the current version (5) at this address:
http://sp2010.pathtosharepoint.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx
That’s a really nice use of the jQueryUI in the context of SharePoint.
Can’t argue that the ‘technique’ as been around thanks to Christophe and the Easy Tabs or
some other variations – including Peter Allen / http://www.bitsofsharepoint.com...
That being said, I can only wish you will share more of your experience designing on top of the SP2010 platform (and 2007). Spotted some very interesting things on your blog – including your portfolio area. Possible material for articles?
Looking forward to more posts from you.
Greg (Schaefer!)
Thanks for sharing.
Greg
from your portfolio:
http://www.susqtech.com/Pages/default.aspx
Hi, folks! Thanks for the feedback. It sounds like this has been around (my zest for jQuery apparently overshadows my reluctant Googl’ing skills), but I’m happy to share my jQuery version of the script nonetheless. I use jQuery and jQuery tabs on pretty much every SharePoint design I do these days, so this brings a web part “tab” zone into line with the CSS and script I’m already using elsewhere on the site.
Whatever flavor of tabs you’re inclined to use, the really great thing is that people are pushing the SharePoint UI to do some interesting dynamic and interactive things. I look forward to the future of SharePoint design!
No need for advanced googling skills, just type SharePoint Tabs and the first result will give you the Easy Tabs :-) (not the latest version unfortunately).
I think your comment is important for the readers: if you already use jQuery UI on the site, then it’s natural to keep the tabs in line with the design. If not, then you’d better think it twice before adding several hundreds kb of code to the page.
btw are you the same guy who used to teach SharePoint karate?
I also am a devotee of this (thanks to Christophe) and find it invaluable.
Kyle,
Thanks for the tab variant and yet another tool for our SP toolbox.
I tried this on Moss 2007 and it doesn’t work. Anyone try it on Moss 2007?
Hi, Draxtor. I have tested this in 2007, but I mostly work in 2010, so the testing is not as thorough as I’d like. If you can explain the issue you are having (steps you took to put the script in place), I may be able to help.
Thanks,
Kyle
I just noticed that the script in step two (”Attach the Script”) is outdated! I fixed this a couple of weeks ago on my blog, and I’ve asked EUSP to fix it here as well. This should resolve any issues you had in SharePoint 2007. Sorry for the confusion!
Hi Kyle,
thanks for this easy jQuery Tab for SharePoint.
Just one thing: for SharePoint 2010 I’ve found that the code line
“$(thisPanel).append($(panelContents).find(’.ms-WPBody’).html());”
only works for Content Editor WebPart,
For other OOTB web parts (I haven’t tested all, but only listview web part and dataform webpart) the class that works to show/hide content is “ms-wpContentDivSpace” (And it works also for the content editor webpart ;-)).
So the code line should become like that:
“$(thisPanel).append($(panelContents).find(’.ms-wpContentDivSpace’).html());”
Hi, Barbara. I will definitely do some testing to see if my script needs to be updated. I’m currently using “ms-WPBody” because it works in both the 2007 and 2010 platforms. Unfortunately, “ms-wpContentDivSpace” is not present in 2007, so I’d have to make some other changes to accomodate for that. I’ll take a look and post any updates here if I find a clever workaround.
As always, thank you for the feedback!
I think this is great, have not seen this before. it is also in pretty good details for the developers or Gurus like you . if you can go in further details like how and where to add this code will be awsome for admins like me . but either way this is great thing to share.,