When the amount of content to be shown on a page exceeds the viewable real estate, users have to scroll down the page to view the content they wish to see. Scrolling is something to be avoided for an optimum user experience. Less scrolling means a much better experience for the user. SharePoint, however, does not provide a way to make this happen.
One of the better solutions to this problem in SharePoint is the use of tabs. Tabs allow the content manager to place more information on a single page while not forcing the user to scroll up and down the page to get to that information.
Wouldn’t it be great to have a solution that allowed you to have a page that had tabs incorporated and ready for you to use?
The goal, then, is to create a Tab page that will do the following:
Allow users to view content with little to no scrolling.
Provide an option that has two to eight tabs.
Enable the use of cookies so that tabs become sticky, so when returning to the tab page, users will land on the last tab they were on.
Allow for multiple web parts to be viewed in one tab.
What, then, will the end product look like? Well, it will look something like the pages shown in Figure 10-1 and Figure 10-2.
You will find that each tab has a header, left, middle, right, and footer section to add web parts. This provides a lot of customization for each tab, as the layout of your web parts provides flexibility in configuration and placement.
Now let’s implement the solution. Here is a brief overview of the three basic steps we will carry out to create a tab page:
Download the page and load it into your SharePoint 2010 instance.
Add a web part to the tab page, selecting the HTML Forms Web Part.
Add the code to the HTML Forms Web Part to customize your tabs.
Once these steps are completed, you will be able to add content to your new tab page. Now onto the details!
Note
All of the code needed to implement this solution can be found at the following link:
The first thing that you will need to do is identify the document/page library to house the tab page. This page can be added to any document library, so it gives you flexibility as to where you deploy it. You also have the option of loading it into your page layout library on your root site so that it is available to all sites within your site collection. For the purposes of this discussion, we will not being going through the process of adding it to the page layouts library.
Next, you will need to either enter the code at the end of this chapter into a blank .aspx page. Extract the contents of the .zip file and upload to a document or page library of your choosing.
Open the page you have chosen to be your Tabs page. Access the Site Actions and select Edit Page. Now look for the section called Tab (shown in Figure 10-3).
On this page, click Add a Web Part. On the screen that pops up, Figure 10-4, select Forms in the Categories list and then select the option HTML Form Web Part. Click Add.
Note
Why are we using an HTML Form web part rather than the Content Editor web part for adding code? In SharePoint 2007, the Content Editor web part is the web part of choice when adding code to a page. However, SharePoint 2010 has changed the way the Content Editor web part works; it is much easier to edit content, but it will strip out code for no apparent reason. So, the web part to use for code is the HTML Forms web part, as it does not evaluate your code.
Now you can edit the HTML Forms web part. Open the Source Editor and enter the following code:
<!-- 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>
You will need to decide the number of tabs you want. To have fewer
than eight tabs, I recommend that you add <!--& --> to the beginning and end
of the lines of code that you use to denote the tabs (those that start
with <li> and end with </li>). This will allow you easily to
add a tab back if you need it in the future, without having to remember
the code you are adding.
<!--<li><a href="#tab-8" ><span>TAB 8</span></a></li>-->
You can give the tabs different names by inserting the name for
the tab between the code <span>
and </span> for each
tab:
<li><a href="#tab-2" ><span>TAB NAME</span></a></li>
Finally, decide if you want the Tab page Help link to be shown. If you decide that the Help link should be hidden, add the following code:
<!-- Code to hide Tab Page Help Link -->
<script type="text/javascript">
$(document).ready(function() {
$('#TabPageHelp').hide();
});
</script>Note
When you add a web part to any of the tabs, 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 the web part you are working on. When you click Modify Shared web part on Tab 3 and it refreshes to Tab 1, it does not mean you are editing the web part in Tab 1. You will notice that you can click Tab 3 and you will see that the web part has the dotted lines that indicate it is being edited.