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

Now that you’ve attached the script, run it using a jQuery selector that matches the <div> you created in step three (above). This code also goes in an attached JavaScript file.

$(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!

Adding jQuery is Easy

You’ll need to include a few JavaScript libraries in order to use jQuery tabs at all. These libraries can be somewhat cumbersome for users on slower connections to download, and it’s definitely the major disadvantage of using a library like jQuery to add this sort of functionality to your site. The best things we can do in this case is try to minimize the effect of serving this JS library to our clients. First of all, I would recommend always using the “minified” version of the jQuery script. It’s much smaller in size than the standard version, which obviously will reduce the amount of time needed to load your site when users first visit it. The only difference between the minified and the standard library is that the good folks at jQuery have removed all sorts of characters in the document, which makes it less readable, but makes the file size much smaller. If you want to delve into the depths of the jQuery library, you can download the standard version and take a gander offline, but don’t force your users to download the full version if you don’t have to.

Additionally, Google (here) and Microsoft (here) have both set up distribution networks to serve these libraries to your users. Don’t waste bandwidth and your clients’ time by forcing users to download these libraries from your servers! Chances are, Google/Microsoft have the resources to serve these files to you users faster and more reliably than you can, so please utilize these free services. Additionally, users have a much greater chance of already having a cached version of these files when you used the shared location. Sweet!

Add the library references to your <head/> to get started.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

The Tabs Markup

What’s so wonderfully beautiful about jQuery tabs is the simplicity of the HTML. Even more, users who aren’t using JavaScript will visit your site and see a perfectly formatted and functioning page. Use this as a template for your tabs HTML:

<div class="ui-tabs">
	<ul class="ui-tabs-nav">
		<li><a href="#tabs-1">Tab One</a></li>
		<li><a href="#tabs-2">Tab Two</a></li>
		<li><a href="#tabs-3">Tab Three</a></li>
	</ul>
	<div id="tabs-1" class="ui-tabs-panel">
		<p>Content one.</p>
	</div>
	<div id="tabs-2" class="ui-tabs-panel">
		<p>Content two.</p>
	</div>
	<div id="tabs-3" class="ui-tabs-panel">
		<p>Content three.</p>
	</div>
</div>

Add Some Style

This is where my template really starts to differ from jQuery’s version. The CSS jQuery would have you use is not simple enough for me, so I created my own version of the CSS that will give you a very basic frame onto which you can apply your own design. Here’s what I like to start with:

.ui-tabs {
	zoom: 1;
}
.ui-tabs .ui-tabs-nav {
	list-style: none;
	position: relative;
	padding: 0;
	margin: 0;
}
.ui-tabs .ui-tabs-nav li {
	position: relative;
	float: left;
	margin: 0 3px -2px 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
	display: block;
	padding: 10px 20px;
	background: #f0f0f0;
	border: 2px #ccc solid;
	border-bottom-color: #ccc;
	outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	padding: 10px 20px 12px 20px;
	background: #fff;
	border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
	cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	clear: both;
	border: 2px #ccc solid;
	padding: 10px;
}
.ui-tabs .ui-tabs-hide {
	display: none;
}

Now Make it Do Something

Now that you have your tabs there, you’ll have to initialize them with a simple jQuery statement in order for them to work. Just add this line of JavaScript anywhere on your page.

<script type="text/javascript">
	$(document).ready(function(){
		$(".ui-tabs").tabs();
	});
</script>

The Result

Once you’ve added each of these elements to your page, you should get a very simple tab structure that awaits your styling genius. Just modify the CSS to apply your own design!

Now you’ve got it. Good luck, and happy styling.

When I use the term “DHTML,” I am referring to “Dynamic HTML.” This is an endearing term that many web designers use to describe the fusion of HTML with other web technologies, such as JavaScript and CSS. By using various technologies in tandem, we can create dynamic controls that allow website visitors to interact with content directly on the page without the need to refresh the site with every subsequent click.

The HTML

As you will soon see, the tab strip is a prime example of a DHTML control. Before we delve into every aspect of the tab strip, let’s first start with the HTML:

<div class="tabStrip">
	<ul>
		<li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
		<li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
		<li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
	</ul>
</div>
<div class="tabContentActive" id="tabContent1">
	This is sample tab content (1).
</div>
<div class="tabContent" id="tabContent2">
	This is sample tab content (2).
</div>
<div class="tabContent" id="tabContent3">
	This is sample tab content (3).
</div>

The HTML is relatively simple. We are using an unordered list (<ul/>) for our tabs, and we are using <div/> tags for our tab content. As you can see, I am giving a unique id attribute to each tab link and to each tab content <div/>. This is important, as we’ll need unique id‘s in order to access these elements with JavaScript.

The JavaScript

We are using only one small JavaScript function for the tab control. Here is the code:

<script type="text/javascript" language="javascript">
	var activeTab = 1;
	function openTab(tabId) {
		// reset old tab and content
		document.getElementById("tabLink"+activeTab).className = "tabLink";
		document.getElementById("tabContent"+activeTab).className = "tabContent";
		// set new tab and content
		document.getElementById("tabLink"+tabId).className = "tabLinkActive";
		document.getElementById("tabContent"+tabId).className = "tabContentActive";
		activeTab = tabId;
	}
</script>

The CSS:

This CSS is a very basic example of what you can do to style your tabs. You can add colors, gradients, and background images to give the control even more design flare.

.tabStrip ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.tabStrip li {
	margin: 0 2px 0 0;
	list-style-type: none;
	float: left;
}
.tabLink {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e8e8e8;
	border: #dadada solid;
	border-width: 1px 1px 0 1px;
	color: #8a8a8a;
}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e0e0e0;
	border: #c0c0c0 solid;
	border-width: 1px 1px 0 1px;
	color: #0066ff;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;
	clear: both;
	background: #f0f0f0;
	border: 1px #dedede solid;
	padding: 10px;
}

The Result:

In true DHTML fashion, we have combined HTML, JavaScript, and CSS to create a fully dynamic user control that can appear anywhere on the web. I have taken the fundamentals learned in this tutorial and have created a more visually appealing example of this code. Click on the image below to see the demo.

Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.