In this blog post we can see how to create multiple Tab Pages in a single web part in SharePoint 2013 with jQuery Easy Tabs Plugin .In SharePoint 2007 or SharePoint 2010 we would have used “easy tabs script” to combine multiple web parts into a single tab control. But this jQuery Easy Tabs Web Part enables you to create multiple tab pages in a Single SharePoint 2013 WebPart
What’s there inside the Web Part?
jQuery and Plugins
This web part requires jQuery and Easy Tabs jQuery plugin .It can be downloaded from http://jquery.com and http://os.alfajango.com/easytabs/ .
Assets Module
This module provisions the scripts and css files to a folder named as “Tabs” inside “Style Library”. If you would like to provision to a different asset lib change the URL attribute of module to a different path.
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="Assets" Url="Style Library/Tabs"> <File Path="Assetstabs.css" Url="tabs.css" Type="GhostableInLibrary" /> <File Path="Assetsjquery.ba-hashchange.min.js" Url="jquery.ba-hashchange.min.js" Type="GhostableInLibrary" /> <File Path="Assetsjquery.easytabs.min.js" Url="jquery.easytabs.min.js" Type="GhostableInLibrary" /> <File Path="Assetsjquery-1.7.1.min.js" Url="jquery-1.7.1.min.js" Type="GhostableInLibrary" /> </Module> </Elements>
Visual WebPart
I have added a Visual WebPart named as “TapPages”, which creates the user interface for Tab pages WebPart and binds the Scripts and css to the web part by invoking a helper method.
UI Part
<asp:Literal ID="ltScripts" runat="server"></asp:Literal> <div id="tab-container" class='tab-container'> <ul class='etabs'> <li class='tab'><a href="#t1">Tips</a></li> <li class='tab'><a href="#t2">Tutorials</a></li> <li class='tab'><a href="#t3">Articles</a></li> </ul> <div class='panel-container'> <div id="t1"> <h2>Heading for Tips</h2> <p> Here goes the content for Tips Place your Asp.Net or User Controls here.... </p> </div> <div id="t2"> <h2>Article on Tab Pages</h2> <p> This articles shows you how to create a SharePoint 2013 Tab Pages WebPart </p> </div> <div id="t3"> <h2>Heading for Articles</h2> <p> Here goes the content for Articles </p> </div> </div> </div> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { $('#tab-container').easytabs(); }); </script>
Code Part
protected void Page_Load(object sender, EventArgs e) { if (!this.Page.IsPostBack) ltScripts.Text = BindAssets(); } private string BindAssets() { StringBuilder sb = new StringBuilder(); sb.AppendLine(ManageAssets.BindScript("Style Library/Tabs/jquery-1.7.1.min.js", true)); sb.AppendLine(ManageAssets.BindScript("Style Library/Tabs/jquery.ba-hashchange.min.js", true)); sb.AppendLine(ManageAssets.BindScript("Style Library/Tabs/jquery.easytabs.min.js", true)); sb.AppendLine(ManageAssets.BindStyle("Style Library/Tabs/tabs.css", true)); return sb.ToString(); }
Helper Class
This class creates the html mark up to attach the scripts and css to the web part
public class ManageAssets { public static string BindScript(string ScriptFileUrl, bool FromRootSite) { if (FromRootSite) ScriptFileUrl = SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, ScriptFileUrl); else ScriptFileUrl = SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, ScriptFileUrl); return string.Format(@"<script type=""text/javascript"" src=""{0}""></script>", ScriptFileUrl); } public static string BindStyle(string StyleFileUrl, bool FromRootSite) { if (FromRootSite) StyleFileUrl = SPUrlUtility.CombineUrl(SPContext.Current.Site.RootWeb.Url, StyleFileUrl); else StyleFileUrl = SPUrlUtility.CombineUrl(SPContext.Current.Web.Url, StyleFileUrl); return string.Format(@"<link rel=""stylesheet"" href=""{0}"" type=""text/css"" />", StyleFileUrl); } }
Leave a comment