Tab with web parts in Sharepoint 2013
Implement a feature about tabbing content with multiple web parts, each associated with a header in a list. I will achieve it in SharePoint 2013.
to tab select web parts, I can regared the web part zone as a div, and all the web parts should be single panel. here is my steps:
1. create a page layout
2. add a div as a container, In this div, append a div as a title to switch button
<div class="sp-content-up">
<div class="tab ms-webpart-titleText">
</div>
<div class="clear"></div>
<div data-name="WebPartZone">
<!--CS: Start Web Part Zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x774799e39f4841a58494c7cdf6dd1b4f" FrameType="TitleBarOnly" Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: Replace this comment with default web parts for new pages. -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->
</div>
</div>
3. cretae a page using the new page layout, and add serveral web parts in the page.
4. add css and js using Script Edit web part in the new page
<script>
$(document).ready(function(){
$(".sp-content-up .ms-webpart-titleText").find("span").each(function(){
if( this.innerHTML !="" && this.innerHTML !=undefined){
$(".sp-content-up .tab").append("<div class='tabtitle'>" + this.innerHTML + "</div>");
}
});
$(".sp-content-up .ms-webpart-chrome-title").hide();
$(".sp-content-up .ms-webpartzone-cell:eq(0)").addClass("tabcontentshow");
$(".tabtitle:eq(0)").addClass("tabtitleclick");
$(".tabtitle").on("click", function () {
var otherTitle = $(".tabtitle:not(.tabtitle:eq('" + $(this).index() + "'))");
var otherContent = $(".sp-content-up .ms-webpartzone-cell:not(.sp-content-up .ms-webpartzone-cell:eq('" + $(this).index() + "'))");
$(".sp-content-up .ms-webpartzone-cell:eq('" + $(this).index() + "')").addClass("tabcontentshow");
$(this).addClass("tabtitleclick");
otherContent.removeClass("tabcontentshow");
otherTitle.removeClass("tabtitleclick");
});
});
</script>
<style>
.sp-content-up .tabtitle{
font-size:13px !important;
}
.tabtitle{
float: left;
margin-right:2px;
width: 200px;
height:30px;
background-color: rgb(230, 230, 230);
color: black;
text-align:center;
cursor:pointer;
border-width:1px;
border-color: gray;
border-style: solid;
}
.tabtitleclick {
background-color:white;
border-bottom-color: white;
}
.tabtitle:hover {
background-color: rgb(241, 241, 241);
}
.clear {
clear: both;
}
.sp-content-up .ms-webpartzone-cell {
display: none;
}
.sp-content-up .tabcontentshow {
display: block;
color: white;
}
</style>