Skip to main content
Sign In |
  Help (new window)

ExamplePoint

Go Search
Home
T o p i c P o i n t
B l o g P o i n t
E x a m p l e P o i n t
C o n s u l t i n g P o i n t
  
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 ‎(16)

 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.
 
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>