jQuery UI (Tabs) on SharePoint

There have been several articles written about using jQuery on SharePoint.

This article focuses specifically on implementing jQuery UI Tabs in a SharePoint Master Page using SharePoint Designer.

So what exactly is jQuery UI Tabs, it is a JavaScript that formats div panels to function as a tab control. See the demo page here for the script in action: http://jqueryui.com/demos/tabs/

Walkthrough

Requirements
A master page with a Content Place Holder in the header and another one in the body tag.
Most master pages will have this by default.
The jQuery UI libraries - http://jqueryui.com/
I recommend on just downloading the default Theme and with all of the UI features selected to start with. You can always down load a different theme latter once the functionality is working as expected.

You will also need the cookie library if you are going to use that functionality - http://plugins.jquery.com/project/cookie
This example includes the use of the cookie Library.


Instructions
1. Create a new page from master
2. Add the libraries to the head tag

In my master page the content place holder is called PlaceHolderAdditionalPageHead so I needed to locate that in the code view of my page.

Then I add the references to the theme, the main jQuery library, the jQuery UI library, and the cookie library.

So my place holder now looks like this

<asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">
  <link type="text/css" href="css/cupertino/jquery-ui-1.8rc1.custom.css" rel="Stylesheet" />
  <script type="text/javascript" SRC="scripts/jquery-1.4.2.min.js" ></ script >
  <script type="text/javascript" src="scripts/jquery-ui-1.8rc3.custom.min.js"></script>
  <script type="text/javascript" src="scripts/jquery_cookie.js"></script>
</asp:Content>


3. Add the script that to change how the div panels render

<!--init tabs-->
<!--Tab selection expires in one day (24hrs)-->
<script type="text/javascript">
  $(document).ready(function() {
  $("#tabContainer ").tabs({ cookie: { expires: 1 } });
 });
</script>


4. Last add the div panels which will hold the content
a. The li tags will be your tab headers
b. The corresponding div panels will hold your tab content

<div id=tabContainer style="width: 100%">
  <ul>
  <li><a href="#tab-1">tab1</a></li>
  <li><a href="#tab-2">tab2</a></li>
  <li><a href="#tab-3">tab3</a></li>
  <li><a href="#tab-4">tab4</a></li>
  <li><a href="#tab-5">tab5</a></li>
  </ul>
 <div id=tab-1 style="width: 100%">Insert tab1 content here</div>
 <div id=tab-2 style="width: 100%">Insert tab2 content here </div>
 <div id=tab-3 style="width: 100%">Insert tab3 content here </div>
 <div id=tab-4 style="width: 100%">Insert tab4 content here </div>
 <div id=tab-5 style="width: 100%">Insert tab5 content here </div>
</div>


Wrap-up
The great thing about this is it works in both SharePoint 2007 and 2010 and its completely rendered client side. Now for those that run w/ JavaScript disabled it degrades gracefully as well, stacking the div panel on top of each other.

There are no restrictions on the div panel content; it can be anything that is allowed in a standard div, Data View Web Parts to strait HTML for example.

Happy Tabbing! :)