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/WalkthroughRequirementsA 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/cookieThis example includes the use of the cookie Library.
Instructions1. 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-upThe 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! :)