Easy Tabs Lite, version 4.0 beta

Posted on by

Today I am releasing a new, beta version of the Easy Tabs:
http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Easy-Tabs-Lite.aspx

For a live demo, go to the Path to SharePoint home page.

Why Lite?

I am maintaining two flavors of the Easy Tabs. This one is public, written in plain JavaScript. There’s another one written with jQuery, which allows to include some additional effects. The jQuery version is made available to the participants of the Easy Tabs online workshop.

Why a copyright?

As I explained in a previous post, original content published on the Web is copyrighted, even if the copyright notice is not displayed. It means that you are not supposed to reuse it without the author’s consent.
By including a license, I explicitly grant you the right to use the script without having to ask me first.

Why beta?

The new version has several new options, and testing all the variations on various browsers is time consuming. A beta version allows me to accelerate the release process and benefit from your input.
To report an issue, leave a comment below, or send an e-mail to Christophe@PathToSharePoint.com.

Will it work in SharePoint 2010?

No, version 4.0 is for SharePoint 2007 only. I am working on a SP 2010 compatible version.

No documentation?

The page is still under construction, and I’ll add more information in the weeks to come. I decided to publish it today to benefit from your feedback as soon as possible, both on the script itself and on the interface.
For information on the options, see the descriptions below and hover over the help icons on the form.

What’s new in v4.0?

Inline script

The script now runs in the flow of the page, instead of waiting for the page to be loaded. This avoids the flashing effect that some users reported.
To make the new script work, you’ll need to place it at the bottom of the Web Part zone.

Web Parts without a title

The previous version triggered an error if the zone contained a Web Part without title. The new version will simply ignore such Web Parts.

Multiple Easy Tabs in a page

The new script is “widgetized”, you can include several Easy Tabs in the same page without having to tweak the code.

Split option

If you check the Split option, the tabs will be distributed across two rows.

Expand all

This option will add to the tabs row an option to make all Web Parts visible.

Web Part headers

Choose to show the Web Part headers if you want to keep the title hyperlink and the Web Part edit menu on the screen.

Autoplay

With this option, the focus will automatically switch to the next tab after a certain amount of time. This can be useful to build a simple slide show for example.

Minified script

For better performance, the new script is compacted. Its size remains similar to the previous version, despite all the added features.

How to get the script?

Go to the Easy Tabs page, fill out the form, and click on the “Save to Disk” button. Once you have your script, you can add it to a SharePoint page via a Content Editor Web Part (preferred solution: upload the text file containing the script to a SharePoint library, then link to it from the CEWP).

Notes:
– if you don’t have Flash 10 installed, you won’t see the “Save to Disk” button. In this case, just copy and paste the code displayed in the text area.
– all the options are included in the script you download. You can later modify the variables directly in the script, without having to come back to the form.
– keep in mind that this is a beta version, for evaluation purposes.

37 thoughts on “Easy Tabs Lite, version 4.0 beta”

  1. Pingback: Links (3/21/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  2. Hi Christophe,

    Just wanted to pass you a quick note to thank you for your great contribution to the Sharepoint community. Your solutions are great for small environments like ours and your continual updates and improvements are very much appreciated.

    George

  3. Christophe first of all I wish to thank you for your contributions! second, seeing as your licensing allows for modifications would it be possible to get a copy of v4.0 that is not minified? I would like to alter the code to add an array that would allow me to pick and choose which web parts get included in the tabbing… however this is difficult to do with the minified version that is available for download.

    Thanks

  4. Thank You! I love this webpart! For anyone who is interested, I added a Content Editor webpart to the same page that I added this webpart and was able to customize the look of the Easy Tabs.

    You can see my customization here (Site still under construction):
    https://jko.harmonieweb.org/Pages/services.aspx

    Here is the CSS, I hope it displays correctly here:

    .ms-tabselected {
    background-image: url(tab_active.jpg);
    background-repeat:repeat-x;
    background-color: #ffffff;
    color:#686868;
    height: 15px;
    border:solid 1px #686868;
    border-bottom-width:0px;
    display: inline-block;
    cursor: pointer;
    }
    .ms-tabinactive {
    background-image: url(tab_inactive.jpg);
    background-repeat:repeat-x;
    background-color:#ffffff;
    color:#686868;
    height: 15px;
    border:solid 1px #686868;
    border-bottom-width:0px;
    display: inline-block;
    cursor: pointer;
    }

    .ms-tabinactive a:link {
    color:#686868;
    }
    .ms-tabinactive a:hover {
    color:#000;
    }
    .ms-tabinactive a:visited {
    color:#686868;

  5. Thank you for this wonderful web part. It has added a nice touch to our site. I was curious if with this version or the previous one there is a way to get a hyperlink URL for each tab that would allow us to direct users to the page with that specific tab as the active/visible one. Thanks for your time.

  6. I’ve added the Easy Tabs Lite Beta to a DispForm.aspx which has the main list item display forn (a Contact) and 3 DVWPs on the page. Tabs are rendered for the 3 DVWPs, but not for the Contact display form?

  7. What’s the timeline for the SharePoint 2010 version of EasyTabs? Really interested in getting going with it. My organization is already migrating to 2010 so the old version won’t work, which is a bummer because we LOVE it. Thanks.

    • Unfortunately I don’t have special connections with Microsoft, and I’ll just receive the final SP release when it goes public (thanks to my partner fpweb.net). I’ll then work to release the Easy Tabs 2010 ASAP.

  8. Thanks Christophe. Since you sometimes do beta versions of things I thought you might start working agains SP 2010 beta. Really appreciate the work you do, thanks.

  9. Hi Christophe,

    Fantastic piece of code and utilised a lot by me in a number of site collections I look after. Inevitably the users want more and taking up Dora’s comment above would be interested to know if it is possible to direct a url from elsewhere to a specific tab.

    Your original Blog page on EasyTabs has an entry by B.J. with some code to add to the 2.0 version but like others who commented at the time I can’t get that to work and anyway the load time for this beta is far superior.

    Not knowing much Javascript I would have no idea where to add or even what to add and would be very grateful to anyone reading this who can point me in the right direction.

      • Christophe,

        The comment about ‘load time of the beta is superior’ came from a colleague of mine who was using the 2.0 version and then started using the beta version and commented that the page loaded far quicker in rendering the tabs.

        Regards,

        David

        • I see, thanks for the feedback. In v4, the tabs are built with the page, while in the previous versions the script was waiting until the page had loaded. So that’s right, the perception is that the tabs render quicker.

          All the requested customizations can be done (direct link to a tab, tab including a link, style changes, etc.). I am considering offering an online workshop in September, for those interested in taking the Easy Tabs further. At that time, I should have a version compatible with SP2010.

  10. Hi,
    This web part is awesome, however, I would like to put tabs on more then 2 rows. Is that possible because my work space is anti panning.
    Thank you

  12. Christophe

    I, like Kel, would like to be able to pick and choose which web parts within the web part zone are included (or not) in the tabbing. Is this a feature that you plan to include in the future? Or, do you have any ideas as to the best way to accomplish that (I’m not a java or jquery programmer, but might be able to tap into some resources that can).

    Thank you for all of your SP contributions…this one in particular has saved us time and time again!

  13. Jeannie, there are two simple ways to exclude a Web Part from the tabbing:
    1/ hide the Web Part title. If the script doesn’t see a title, it will simply ignore the Web Part.
    2/ put the Web Parts that should be ignored below the script. Then when the script runs these Web Parts are not on the page yet, and the script won’t be able to include them.

    I keep in mind Kel’s request, but these days I constantly reshape the script. My current work includes a “Print preview” tab (see my recent post), and the adaptation to SP 2010.

  14. We really love Easytabs! Thank you. Right now each web part is it’s own tab. Is there a way to have 2 or more webparts in one tab? For instance, the first 2 webparts make the 1st tab; 3rd and 4th make the second tab and so on… I want to keep contents related to a particular category together. Thanks for your help on this issue.

  15. Hello Christophe,

    First and foremost what a wonderfull addition EasyTabs is to SharePoint.We have designed all our sites/pages around “centres” where lists and libraries are grouped with easytabs into logical domains.

    We would like to take advantage of the new features in SP2010 but will not move until EasyTabs 2010 is available! I note your comments about the problems you are having, we are currently not using calenders, just lists and libraries, any chance?

    Thanks again,
    Kerry

  16. Hi Christophe, such an awesome solution, thank you! One enhancement that would be great for my particular requirements would be to have the ability to display more than one web part on a tab.

    For example, I have a page with four web parts on it. I would like to have Tab 1 display Web Part 1, Tab 2 display Web Part 2, and Tab 3 display both Web Part 3 and 4.

    One use case for this feature would be to have a CEWP with a legend appearing above a List View, Google Chart, etc.

    Is possible to add some configurable code to accomplish this?

  17. The ability to have several Web Parts under a same tab is a frequent request.

    The purpose of the current script is to be easy. Just drop the code on the page and the tabs appear automagically. This is possible because a simple rule is applied: one Web Part per tab.

    If somebody can give me a “business” rule that assigns several Web Parts to a tab, I’ll try to translate it into the script.

    I have another script with a different approach, that allows multiple Web Parts per tab. I’ll share it in a month or two, it is still a bit rough and needs some polishing.

    • Sure, I and my team of testers are very excited about the results!

      ok, to tell the truth, here is the status:
      – upgrade of the current features to 2010: working
      – new features (e.g. print preview): working on 2007, but not on 2010

      So maybe I’ll release the upgrades in several steps instead of just one. I am giving myself another 2 weeks to fix a couple issues.

  20. Morning Christophe,
    I followed your instructions for adding these tabs, however when its all said and done, all of the web parts are gone and no tabs are found. What could I be doing wrong?

Comments are closed.