Last active
October 15, 2019 09:25
-
-
Save johnnycardy/2c6cd491609aa5384c0aa94a8d5f9862 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!– Reference jQuery on the Google CDN –> | |
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> | |
<!– Reference jQueryUI on the Google CDN –> | |
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> | |
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script> | |
<script src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script> | |
<style> | |
.ui-widget-header { background: none; border-radius: 0; border-left: 0; border-top: 0; border-right: 0; } | |
#tabsContainer { border:none;} | |
.ms-webpartzone-cell { margin: 0 !important; border:0; } | |
</style> | |
<script> | |
jQuery(document).ready(function($) { | |
if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value == "1") | |
return; | |
//Get the web parts | |
var $allWebParts = $("#s4-workspace .ms-webpartzone-cell"); | |
//Exclude the web part we're currently in - we know by the existence of the tabsContainer div | |
$allWebParts = $.grep($allWebParts, function(webPartDiv){ | |
return $(webPartDiv).find("#tabsContainer").length === 0; | |
}); | |
//Exclude web parts with no content (height of zero) | |
$allWebParts = $.grep($allWebParts, function(webPartDiv){ | |
return $(webPartDiv).height(); | |
}); | |
//Exclude web parts that don't have a title since a title is needed for the tab | |
$allWebParts = $.grep($allWebParts, function(webPartDiv){ | |
var title = $(webPartDiv).find(".ms-webpart-chrome-title").text(); | |
if(!title){ | |
//Hide it entirely | |
$(webPartDiv).hide(); | |
} else { | |
return true; | |
} | |
}); | |
//Set up the tabContainer | |
$.each($allWebParts, function(i, webPart){ | |
//Get the title, hide it and retrieve its text | |
var title = $(webPart).find(".ms-webpart-chrome-title").hide().text(); | |
$("#tabsContainerHeader").append("<li><a href='#tab-" + i + "'>" + title + "</a></li>"); | |
//Hide the entire web part (except for the first one which will be initially selected) | |
if(i !== 0){ | |
$(webPart).hide(); | |
} | |
//Add a class to later identify it | |
$(webPart).addClass("tabbedWebPart-" + i); | |
//Add a dummy tab for jqUI | |
$("#tabsContainerBody").append("<div id='tab-"+ i +"' style='padding:0'></div>"); | |
}); | |
//Tell jQueryUI to render | |
$("#tabsContainer").tabs({ | |
active: 0, | |
activate: function(event, ui){ | |
//Show the web part | |
$(".tabbedWebPart-" + ui.newTab.index()).show(); | |
//Hide the old one | |
$(".tabbedWebPart-" + ui.oldTab.index()).hide(); | |
} | |
}); | |
}); | |
</script> | |
<div id="tabsContainer"> | |
<ul id="tabsContainerHeader"></ul> | |
<div id="tabsContainerBody"></div> | |
</div> |
Hi, thank you for sharing the code. This works on sharepoint 2013. Is there a way to only grab all web parts from within one zone (i.e. left zone, right zone) instead of all web parts on the whole page? Thank you once again!! :)
HI. Doesn't seem to work in SharePoint online, or least not with my site. It works fine in page edit mode, but when you close the editor it displays an empty page. The tabbed content doesn't display at all.
Hello All.
How about hiding the tabs when list or library in the web part is empty? Although I can see a reference of empty web parts, within the code, it does not seem to work.
Thank you in advance for your prompt reply :)
Michael
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Script for displaying the web parts of a SharePoint WebPartPage inside tabs.