Tabs to Web Part pages to access pages
1. The first thing that you will need to do is identify the document/page library to house the tabpage and jquery scripts.
2. Download attached TabPage.aspx and jquery files then upload to a page library.
3. Navigate to TabPage and then go to Site Actions and select Edit Page
4. Now look for the section called “Tab”
5. Click “Add a Web Part”
6. Select Content Editor Web Part and click Add.
7. Now add below script to Content editor web part.
<!– Code to hide Tab Page Help Link –>
$(document).ready(function() {
$(‘#TabPageHelp’).hide();
});
if(typeof jQuery==”undefined”){
var jQPath=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/”;
document.write(“”);
}
<!– Code to add Tabs –>
</div>
8. Add Content Editor web part to “Zone Tab 1 Header”, “Zone Tab 2 Header” and “Zone Tab 3 Header” and add iframe code:
aspx Page code:
<%@ Page Language=”C#” MasterPageFile=”~masterurl/default.master” inherits=”Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” meta:progid=”SharePoint.WebPartPage.Document” %>
<%@ Register tagprefix=”WebPartPages” namespace=”Microsoft.SharePoint.WebPartPages” assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>
<asp:Content runat=”server” ContentPlaceHolderID=”PlaceHolderAdditionalPageHead”>
<!– Tab Page Version 3.0 –>
<!– Compatable with SharePoint 2007 and 2010 –>
if(typeof jQuery==”undefined”){
var jQPath=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/”;
document.write(“”);
}
<style>
#tabs ul.tabNavigation{
margin: 0;
padding: 0;
list-style: none;
height: 20px;
/* Push the tabs 1px down to hide the top-border of the tabbedWindow */
position: relative;
top: 1px;
border-bottom: #998b7d 1px solid;
}
#tabs ul.tabNavigation li{
float: left;
padding: 0;
margin: 0 5px 0 0;
background: none;
}
#tabs ul.tabNavigation a{
background-color: #fff;
border: 1px solid #bbb;
display: block;
padding: 4px 0 1px;
text-decoration:none
}
#tabs ul.tabNavigation a.selected{
font-weight: bolder;
background-color: #C0C0C0;
border-bottom: #bbb 1px solid;
}
#tabs ul.tabNavigation a span{
padding: 0 10px;
}
#tabs div.tabbedWindow{
background-color: #fff;
}
#tabs ul.tabNavigation a:hover{
background-color: #F0F0F0 ;
}
</style>
$(function () {
var tabContainers = $(‘div#tabs > .tabbedWindow’);
var tabsX = get_cookie ( “tabs” );
if ($(‘.ms-WPAddButton’).length
</asp:Content>
<asp:Content runat=”server” ContentPlaceHolderID=”PlaceHolderMain”>
<table cellpadding=”4″ cellspacing=”0″ border=”0″ width=”100%”>
<tr>
<td id=”_invisibleIfEmpty” name=”_invisibleIfEmpty” colspan=”3″ valign=”top” width=”100%”>
<WebPartPages:WebPartZone runat=”server” Title=”loc:Header” ID=”Header” FrameType=”TitleBarOnly”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
<tr>
<td id=”_invisibleIfEmpty” name=”_invisibleIfEmpty” colspan=”3″ valign=”top” width=”100%”>
<WebPartPages:WebPartZone runat=”server” Title=”loc:Tab” ID=”Tab”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
<tr>
<td id=”_invisibleIfEmpty” name=”_invisibleIfEmpty” valign=”top” height=”100%”>
</div>
</td>
</tr>
<tr>
<td id=”_invisibleIfEmpty” name=”_invisibleIfEmpty” colspan=”3″ valign=”top” width=”100%”>
<WebPartPages:WebPartZone runat=”server” Title=”loc:Footer” ID=”Footer” FrameType=”TitleBarOnly”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>
</tr>
<tr>
<td colspan=”3″ valign=”bottom” width=”100%” ALIGN=”right”>
</td>
</tr>
if(typeof(MSOLayout_MakeInvisibleIfEmpty) == “function”) {MSOLayout_MakeInvisibleIfEmpty();}
</table>
</asp:Content>
<asp:Content runat=”server” ContentPlaceHolderID=”PlaceHolderPageTitle”>
Site
</asp:Content>
aaedla 