首页 > 代码库 > Tab with web parts in Sharepoint 2013
Tab with web parts in Sharepoint 2013
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>
5. check the result, is that cool!?
Tab with web parts in Sharepoint 2013
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。