B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Site > TabPage  

View All Site Content

Expand/Collapse M E N U (click) : Examples ‎(21)

 Tab Page Overview

Welcome to the Tab Page site.  Here you will find a solution to create a tabbed view of content, without haveing to edit the page in SPD or a text editor. 

This page uses the tab page and provides a the steps to implement this solution.

UPDATE: 5/7/2010

The code to this page has been updated to now have cookies so that it remembers the tab you are on when the page is refreshed.  This will help out with having a document library where you are editing or changing information.

If you have already implemented this solution prior to the update and would like to have this feature click on the tab called Code Update.
 
This solution will allow you to have a lot more content on a page.  The user just has to click a tab to view the content you provide.  There is no need to scroll down the page or click a link to go to another page to view the content.  All of the navigation is done on one page.

This is made possible by Baris Wanschers who created the script to do this. His work can be found here: http://www.bariswanschers.com/blog/creating-tabbed-windows-sharepoint-jquery.

I utilized his script and wrapped it into a page that can be loaded to any document/page library and used without having to us SharePoint Designer or a text editor.

Please proceed to Step 1 to begin the process.
  1. The first thing that you will need to do is identify the document/page library to house the tabpage.
    • This page can be added to any document library and so it gives you much flexibility as to where you deploy this.
  2. Download the tabpage file from here:
  3. Extract the contents of the zip file and then upload to a document or page library
  4. Proceed to STEP 2 
  1. In this step you will want to open the page.
  2. Then go to Site Actions and select Edit Page
  3. Now look for the section called "Tab"
  4. Click "Add a Web Part"
  5. Select a Content Editor Web Part and click Add
  6. Proceed to STEP 3
  1. Now edit the Content Editor Web Part (CEWP)
  2. At this point you will then want to open up the Source Editor and past in the code below
  3. Now you will need to decide the number of tabs you want.
    • To have less then 8 tabs I recommend that you do the following, add <!--  & --> to the start of this code <li> and the end of this code </li>
    • This will allow you to easily add a tab back if you need it in the future with out having to remember the code to add
    • Example: <!--<li><a href="#tab-8" ><span>TAB 8</span></a></li>-->
  4.  Next you will want to the change the title of the tabs.
    • The title is found between the code <span>  </span>
  5. Last do you want the  Tab Page Help to show or NOT show
    • Add the <script> code to HIDE the help button
  6. Below is the code to add to the CEWP

<!-- Code to hide Tab Page Help Link -->
<script type="text/javascript">
   $(document).ready(function() {
        $('#TabPageHelp').hide();
   });
</script>

<!-- Code to add Tabs -->
<div id="tabs">
     <ul class="tabNavigation ms-WPBody">
         <li><a href="#tab-1" class="selected ms-topnavselected"><span>TAB 1</span></a></li>
          <li><a href="#tab-2" ><span>TAB 2</span></a></li>
          <li><a href="#tab-3" ><span>TAB 3</span></a></li>
          <li><a href="#tab-4" ><span>TAB 4</span></a></li>
          <li><a href="#tab-5" ><span>TAB 5</span></a></li>
          <li><a href="#tab-6" ><span>TAB 6</span></a></li>
          <li><a href="#tab-7" ><span>TAB 7</span></a></li>
          <li><a href="#tab-8" ><span>TAB 8</span></a></li>
     </ul>
        <div style="clear: both"></div>
</div>

Now that you have your tab page installed and setup, it now time to add all the content.

Known Nuances while editing the content of tabs:

  • When you add a webpart to Tab 2 - 8 you will notice that each time the page refreshes it takes you back to Tab 1.
    • This will happen each time, but it does not affect what webpart you are working on.
    • So just because you clicked Modify Shared Webpart on tab 3 and it refreshes to Tab 1 does NOT mean you are editing the webpart in Tab 1. 
    • You will notice that you can click on tab 3 and see that the webpart has the dotted lines indicating that it is being edited.

This soulutions uses JQuery and the script created by Baris Wanschers. 

  • JQuery can be deployed in two ways, remotely or locally:
    • Remotely - This page is using a remotly hosted script found on the Google API site. 
      • Nothing needs to be changed to the standard page to use the remotly hosted JQuery file.
    • Locally - If you or your admin have a local copy of JQuery and would like the page to utilize this, then you may need to modify the code on the TabPage.
      • You have two options to utilize the JQuery locally:
        • If you have loaded JQuery with the master page, then nothing needs to happen.  The code in the page will look to see if JQuery is already loaded.
        • If you add JQuery to each page/script then you will need to change the script to the following:
        • <script type="text/javascript" src="http://uservername/direcotry/jqueryfilename.js"> </script>

Current script in the TabPage:

<script type="text/javascript">
if(typeof jQuery=="undefined"){
 var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
 document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>

This tab is only for people that have implemented this solution prior to 5/7/2010. 

To make the needed changes to the code you will need to be able to edit this page with SharePoint Designer, otherwise you will need to download the latest version and recreate your page.

  1. Open your tab page in SharePoint Designer. 
  2. Change to code view so that you can see all of the code.
  3. Find the <script> tag.  This should be near the top.
  4. You are going to replace from <script> to </script>  with the below code.
  5. Once replace, now save and the new feature should be in place.

<script type="text/javascript">

//
//  Tab Script created by Baris Wanschers
//  Contact: barisart@gmail.com
//  blog: www.bariswanschers.com
//

$(function () {
 var tabContainers = $('div#tabs > .tabbedWindow');
 var tabsX = get_cookie ( "tabs" );

 if ( tabsX == null) {
  tabContainers.hide().filter('#tab-1').show();
 } else {
  tabContainers.hide();
  tabContainers.hide().filter(tabsX).show();
  $('div#tabs ul.tabNavigation a').removeClass('ms-topnavselected selected');
  $('[href=' + tabsX + ']').addClass('ms-topnavselected selected');
 }
 
 $('div#tabs ul.tabNavigation a').click(function () {
  var tabSelected = $(this).attr('href');
  tabContainers.hide();
  tabContainers.filter(this.hash).show();
  $('div#tabs ul.tabNavigation a').removeClass('ms-topnavselected selected');
  $(this).addClass('ms-topnavselected selected');
  set_cookie ( "tabs", tabSelected );
  return false;
 })
});


function set_cookie ( name, value )
{
 var cookie_string = name + "=" + escape ( value );

 document.cookie = cookie_string;
}

function get_cookie ( cookie_name )
{
 var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

 if ( results )
 return ( unescape ( results[2] ) );
 else
 return null;
}
    </script>