Tab Pages WebPart in SharePoint 2013 based on jQuery Easy Tabs without combining multiple web parts

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);
    }
 }

Download Source Code