Skip to main content

The SharePoint User's Toolkit

Go Search
Home
  
The SharePoint User's Toolkit > Pages > Easy-Tabs-v5  

Web Part Page Title Bar image
Easy Tabs Version 5.0

 Build Your Own

Tabs color


Inactive TabActive TabInactive TabInactive Tab
 

Inactive TabActive TabInactive TabInactive Tab
 
Modify colors

"Expand All" option

Adds to the tabs row an option to make all Web Parts visible

"Print Preview"

Adds to the tabs row an option to view the zone in full screen, for example for printing.

Autoplay option

Autoplay adds a play/pause option to the tabs row. When turned to 'Play', the focus automatically switches to the next tab at regular intervals.

Web Part headers

If you select the 'Show' option, the Web Part header (title, edit options) will be displayed.

Split tabs row

Select this checkbox to have the tabs distributed across two rows.

License *

I have read, understood, and I agree to the license terms.As an end user, the license explicitly grants you the right to use the script.

You must have Flash 10 installed to activate the "save to disk" button.

Filename:
To display the code, select your options and accept the license terms.

 About the Easy Tabs

 

When added to a Web Part zone, the Easy Tabs automatically generate a tabbed interface, with one tab per Web Part present in the zone. Note that Web Parts that are without a header, below the script or hidden will be ignored.

 EasyTabs

 Instructions

 

1/ Build your script

in the Easy Tabs Builder ("Build Your Own" tab):

- Select your options; read and accept the license terms.

- Click on the "Save To Disk" button to save your script to your computer.

SaveToDiskIf you don't see the button, you'll need to copy and paste the script displayed at the bottom of the page.

 

- Upload the script to a SharePoint library in your site collection.

Recommended practice: to host your custom scripts, create a dedicated "Utilities" library at the top level of your site collection. Make sure all users have read access to it.

2/ Using the script

- on the Web page where you want to place the tabs, add a Content Editor Web Part

- Edit the Web Part:
Under Content Link, enter the link to your script
Under layout, select the "hidden" checkbox

- click OK.

- move the Content Editor Web Part below all the Web Parts you want to tabify.

- Exit the Edit mode. In normal mode, the Easy Tabs script will automatically generate the tabs.

3/ Optional: add the Web Part you customized to the Web Part gallery. This will allow you to reuse it across your site collection.

 New in v5

 

The Easy Tabs script has been completely rewritten from v4 to v5.

The main improvements:

- Work in both SP 2007 and SP 2010.

- Stylesheets are now included in the code; for SP 2010, the colors can be modified in the Easy Tabs builder.

- New "Print preview" tab that displays the Web Part zone in full screen.

- Better compatibility with third party Web Parts.
 
Like the previous versions, the script doesn't have any external dependency (no jQuery or other external library; tabs rendered using the default SharePoint images).

 Known Issues

 

Calendar views in SharePoint 2010

When used with the Easy Tabs, events in calendar views are not positioned correctly. This issue seems to be linked to a bug in SharePoint calendars, as it happens in other circumstances (browser window resize for example).

 ‭(Hidden)‬ EasyTabs

 ‭(Hidden)‬ Create Code

 ‭(Hidden)‬ Banner

 ‭(Hidden)‬ GA

Copyright © 2009-2010 Christophe Humbert