Ashok Raja's Blog
Tab Pages WebPart in SharePoint 2013 based on jQuery Easy Tabs without combining multiple web parts
by Ashok Raja T 15. April 2013 21:31

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

Tabs

Note : If you are looking for combining mutiple multiple Web Parts into tab pages in SharePoint 2013, then check out this link.

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/ .

Note: The recent version of jQuery (Version 1.9.1) is not compatible with this plugin, I have used version 1.7.1 of jQuery for this web part

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="Assets\tabs.css" Url="tabs.css" Type="GhostableInLibrary" />
     <File Path="Assets\jquery.ba-hashchange.min.js" Url="jquery.ba-hashchange.min.js" Type="GhostableInLibrary" />
     <File Path="Assets\jquery.easytabs.min.js" Url="jquery.easytabs.min.js" Type="GhostableInLibrary" />
     <File Path="Assets\jquery-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);
    }
 }
Note: This web part provides a raw skeleton for developers to extend it according to their business needs. If you are a “Power User” and would like to create tab pages on the fly without the help of Visual Studio, please look for my next post.

Download Source Code

blog comments powered by Disqus