Skip to content

Tabs to Web Part pages to access pages

April 12, 2014

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/&#8221;;
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/&#8221;;
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>

Advertisement

From → Web Development

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: