Wednesday, August 24, 2016

Tabs for SharePoint Lists and Document Library

As we knew there are Bootstrap,Jquery and Angular JS tabs which are not fine to use sharepoint list iframe. So we have wounder-full post from "Mr.Mark" in his blog on "Hillbillytabs" for sharepoint which is the below code


<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link  type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
     jQuery(document).ready(function($) {


        //Put 3 web parts in 3 different tabs
//        var webPartTitles = ["Web Part Title 1","Web Part Title 2","Web Part Title 3"];
//        HillbillyTabs(webPartTitles);

        //Create a Tab with Two Web Parts, and a second tab with one Web Part
//        var webPartTitles = ["Tab Title;#Web Part Title 1;#Web Part Title 2","Web Part Title 3"];
//        HillbillyTabs(webPartTitles);
   
        //Put all web parts (that have visible titles) on page that have into tabs
        HillbillyTabs();

    });


    function HillbillyTabs(webPartTitles)
    {
        if(webPartTitles == undefined)
        {
            var CEWPID = "";
            $("#tabsContainer").closest("div [id^='MSOZoneCell_WebPart']").find("span[id^='WebPartCaptionWPQ']").each(function()
            {
                CEWPID = $(this).attr("id");
            });

            var index = 0;
            $("span[id^='WebPartCaptionWPQ']").each(function()
            {
                if($(this).attr("id") != CEWPID)
                {
                    var title = $(this).prev("span").text();
                   
                    $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                        title+'</a></li>').after('<div id="Tab'+index+'"></div>');
                   
                    var webPart = $(this).prev("span").hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                   
                    $("#Tab" + index).append((webPart));
                    index++;
                }
            });
        } else {
        for(index in webPartTitles)
            {
                var title = webPartTitles[index];
                var tabContent = title.split(";#");
                if (tabContent.length > 1)
                {
                    $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                        tabContent[0]+'</a></li>').after('<div id="Tab'+index+'"></div>');
               
                    for(i = 1; i < tabContent.length; i++)
                    {
                        $("span[id^='WebPartCaptionWPQ']").each(function()
                        {
                            $(this).prev("span:contains('"+tabContent[i]+"')").each(function()
                            {
                                 if ($(this).text() == tabContent[i]){
                                   
                                    var webPart = $(this).closest("span").closest("[id^='MSOZoneCell_WebPart']");
                                   
                                    $("#Tab" + index).append((webPart));
                                 }
                               
                            });
                        });
                    }
                }
                else
                {
                    $("span[id^='WebPartCaptionWPQ']").each(function()
                    {
                        $(this).prev("span:contains('"+title+"')").each(function()
                        {
                             if ($(this).text() == title){
                                $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="HillbillyTabClick(this.id);">'+
                                    title+'</a></li>').after('<div id="Tab'+index+'"></div>');
                               
                                var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                               
                                $("#Tab" + index).append((webPart));
                             }
                           
                        });
                    });
                }
            }
        }
        $("#tabsContainer").tabs();
       
        ShowActiveTab();
   
    }
   
   
    function HillbillyTabClick(id)
    {
        $.cookie("ActiveTab",id,{ path: '/' });
    }
   
    function ShowActiveTab()
    {
        $("#" + $.cookie("ActiveTab")).click();
    }
   
</script>
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

2 comments:

  1. Good post. I learn something totally new and challenging on blogs I stumble upon on a daily basis. It will always be interesting to read articles from other authors and practice something from their websites...

    Sharepoint Training in Chennai

    ReplyDelete
  2. Hi guys,
    Thank you so much for this wonderful article! Here we all can learn a lot of useful things and this is not only my opinion!
    Even BLNCK corp. and http://www.tzunami.com confirmed it!

    ReplyDelete