Stump the Panel » Q&A on "Path to SharePoint" Workshops

Easy Tabs October 8 workshop - Q&A

(2 posts)
  • Started 1 month ago by Christophe
  • Latest reply from Areon Jackson
  1. from Tracy:
    So the Easy Tabs Web Part just automatically distributes every Web Part contained within its zone to a tab? Do we have control over the order they appear in?

    Right, all is done automatically, there is no additional setup.

    The tabs follow the order of the Web Parts. If you want to change the tabs order, simply change the order of the Web Parts in the zone. To add/remove tabs, simply add/remove Web Parts to/from the zone.

    from Joan:
    Still, on our own company sites, we need to edit the path to jquery files or use the Google api, correct?

    That is correct. Either point to your local copy of jQuery, or to a public API:
    Google: http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
    Microsoft: http://www.asp.net/ajax/CDN/#4

    jQuery corner is a plugin that needs to be downloaded; AFAIK there is no public API. You’ll find the latest version and a link to the original site in your workshop sandbox.

    from Tracy:
    And the tab styles such as fonts, will be inherited from the constituent web part titles?

    No, tabs have their own style that you can customize.

    from Tracy:
    Which portion controls the styles for the text/background, etc of the tabs themselves?

    See the stylesheet after the script, in the CEWP. Also see the customization guide for more details.

    from Terry:
    Will version 3 overwrite version 2 when I download it?

    You need to delete the v2 Web Part and replace it with v3.

    from Tracy:
    Is there a way to center the tabs?

    You need to change the style of the tabs container, for example:
    .ET001_tabcontainer { cursor:pointer; white-space:nowrap; width:100%; text-align:center;}

    from Areon:
    Are there limitations with what WP it will work with and those it will not?

    All standard SharePoint Web Parts will work, including Data View Web Parts.

    from Harsha:
    I tried to add two tab webparts in two different zones in the same webpage…and it did not work

    To avoid interferences, you need to give each Easy Tabs Web Part a specific id. To do this, open your Web Part in a text editor, and replace all occurrences of “ET001” with another id (“ETxxx”).

    In your sandbox, the dashboard example uses three instances of the Easy Tabs.

    from Tracy:
    So we could potentially use a QuickMenu and EasyTabs on the same page, as long as they were in different zones and were given different IDs in script file?

    That is correct.

    from Tracy:
    Christophe, do all of your solutions use CEWP and jQuery?

    All the Easy Tabs solutions rely on the CEWP, so that they can work for users without server access. Version 2 is written in JavaScript, while v3 uses jQuery to allow additional features like animations and rounded corners.

    from Areon:
    Does having all of the CEWP with all of the extra code affect performance?

    There are two ways in which performance can be affected: when loading the script and when running it.

    Load: limited impact as we are using jQuery, a lightweight library.

    Execution: very little impact in modern browsers, as script engines have made huge progress in the past few years. The current trend is actually to move more and more layout scripts to the client side. Also, when coding with jQuery I try as much as possible to use ids, which is the most efficient way to access elements.

    from James:
    The Issues WP you have created...How do we open up the entire list? Easy Tabs takes away the link to the list.

    You can choose to keep the Web Part header with the link, by modifying the script. Simply remove these lines:
    // Hide the WP headers
    ET001_WPs.find("tr:first").css("display","none");

    from Tracy:
    Can you provide a direct URL to a specific tab?

    Yes, use the “Index” querystring. For example, if you want to directly access the second tab, append ?Index=2 to your URL.

    from Areon:
    is there a way to add into the script the functionality so that when it is clicked the tab is displayed, but when it is double-clicked it opens the library?

    This could be done by adding a double click event to the tabs (ET001_Tab.ondblclick =…), the same way there is a click event(ET001_Tab.onclick =…).

    from Terry:
    Is the dashboard data from Excel or SharePoint lists?

    These are specific customizations of SharePoint lists. See this blog entry for references:
    http://pathtosharepoint.wordpress.com/2009/10/07/online-workshop-easy-tabs-for-project-dashboard/

    from Harsha:
    Does the corner apply to other webparts on the page or just to easy tabs?

    It only applies to the tabs. To apply rounded corners to the Web Parts themselves, see this blog entry:
    http://pathtosharepoint.wordpress.com/2009/09/11/rounded-corners-and-dog-ears/

    from Tracy:
    Christophe, can I ask you a general JQuery CEWP question?
    Please do. For jQuery questions that are not directly related to the workshops, use the jQuery STP forum.

    Posted 1 month ago #
  2. Areon Jackson
    Member

    Christophe, is there any limitations of using or viewing EasyTab (V3) with IE6 due to the jquery component. I have been told that there have been some poeple for whom the tabs have not displayed correctly. They were using IE6.

    Posted 1 month ago #

RSS feed for this topic

Reply

You must log in to post.