0

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".

3

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...

  • would you be open to chat about this? I'm somewhat of a beginner to DOM manipulation. – Sabien Ambrose Jan 6 '17 at 21:44
  • I'm happy to respond to specific questions you have about implementing your solution if you post them here. Good luck! – Julie Turner Jan 10 '17 at 15:10
  • If I were to simply want to take one of my webparts on the page and hardcode it into the tabbed structure, what all code would i need? – Sabien Ambrose Jan 17 '17 at 21:44
  • I've updated the answer slightly to indicate where the id's of each of your web parts would be hard coded inside of the <>. Please be aware that this is sample code. That last for loop that initially hides all the web parts should really be placed in an init function and called when the page loads, and all of this code should be namespaced, etc, etc. – Julie Turner Jan 18 '17 at 14:36
  • how do you select which one should be displayed on load? – Sabien Ambrose Jan 20 '17 at 22:53
0
  • 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.

enter image description here

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

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

  • I use a mac for development so I can't use SPD as of right now. I like the above option of making this work with the JS/Jquery if you can help with that:) – Sabien Ambrose Jan 6 '17 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.