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