Jquery EasyUI web part tabs

Question

I am currently using Jquery's EasyUI to display some tabs on my site, with some fairly simple code:

    <!---->
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://projectadvocatesllc.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/themes/default/easyui.css">
    <script type="text/javascript" src="https://projectadvocatesllc.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/jquery.min.js"></script>
    <script type="text/javascript" src="https://projectadvocatesllc.sharepoint.com/sites/project_sb3/SiteAssets/dev_jqueryui/jquery.easyui.min.js"></script>

    <script>
    var tabs = ['<id MSOZoneCell_WebPartWPQ12>', '<id MSOZoneCell_WebPartWPQ13>'];

    ExecuteOrDelayUntilScriptLoaded(initTabs, "sp.js");

    func initTabs(){
        //hide all of the webparts
        for(var i=0;i<tabs.length;i++){
        $('#' + tabs[i]).hide();
        }

        //show the first webpart in tab 1
    }

    function clickTab(id){
        for(var i=0;i<tabs.length;i++){
            if(tabs[i] === id){
                 $('#' + id).show(); 
            }else{
                 $('#' + tabs[i]).hide();
            }
        }
    }
    </script>

    <!---->


    <div class="easyui-tabs" style="width:1200px;height:1000px">
        <div title="Project Documents" style="padding:10px" onclick="clickTab('<id MSOZoneCell_WebPartWPQ12>')">

        </div>

        <div title="Project Updates" style="padding:10px" onclick="clickTab('<id MSOZoneCell_WebPartWPQ13>')">

        </div>
    </div>

If I were to want to take some of the webparts on the same page, and put each of them in the 4 tabs here, how could I do it?

Edit: I realize I should have given more information on the topic. First off, I am using sharepoint online.

Second, My goal is to have a calendar, document library, and 2 lists displayed in 4 different tabs (in that order). All of the webparts are in "zone 2".

Answer 1

I want to make the caviot that the answer to this question depends somewhat on what version of SharePoint you're using. Especially if you're using SharePoint online there is no guarantee that solutions that use DOM manipulation will always work.

I wrote an AngularJS based web part that does what you're looking for. It works on SharePoint 2013, and in classic mode in O365. The basic idea is that you would add your tabs as a "web part" (CEWP/SEWP) and then inside of it, find the web part zone you're in:

var elementWP = $(element).closest("div.ms-webpartzone-cell");
var root = $(element).closest("div.ms-webpart-zone");

Once you have the webpart zone div, it's children are the individual webparts in the zone

var webParts = root.children();

To accomplish what you're doing I basically appended a class to each of those child webparts (that wasn't the tabs themselves) that changed the style to display:none. Then built the "tabs" (i.e. your div tags) by extracting the title of the web part.

That's a dynamic way to build a tab solution, so that you can reuse it. If that's what you need then you can that that plus the "hard coded" way I'm giving you below and build a complete answer.

Assuming you don't need a dynamic solution, and are willing to hard code it, you can examine the page and find the Id's of the web parts you want in the tabs. Using the information I provided above you can see the web parts will be children of the root element. Use jQuery to hide them all, and then show them individually when your tabs are clicked. I particularly looked for the div with a class of ".ms-webpart-chrome-title".

<div title="Action Plan"  style:"padding:10px" onclick="clickTab('<id of web part to show>')></div>

And then your clickTab function would be something like

var tabs = ['<id web part 1>','<id web part 2>', '<id web part 3>'];

function clickTab(id){
    for(var i=0;i<tabs.length;i++){
        if(tabs[i] === id){
             $('#' + id).show();
        }else{
             $('#' + tabs[i]).hide();
        }
    }
}

for(var i=0;i<tabs.length;i++){
    $('#' + tabs[i]).hide();
}

As I said you'd also need an init function that runs when the page loads to hide all the tabs in your tabs array. This is just one of several possible ways you could code it, depending on your requirements...

Answer 2

• create an aspx page Layout from share point designer

• open your page layout

• copy your html code into page layout

• add web part zones to each <div> tag in your page layout from share point designer.

apply this page layout to the page that you want to show.

hope this helps. if you have any queries, pleasure to help.