Wednesday, December 10, 2014

Webparts Display in Tabs

<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<style type="text/css">
</style>

<script type="text/javascript">
     jQuery(document).ready(function($) {
         $(".s4-wpcell").hide();
         $(".s4-wpcell-plain").hide();
         //Put the Web Part Title for all the Web Parts you wish
         //to put into the tabbed view into the array below.
         setTimeout(function() {
            HillbillyTabs(["Announcements","News & Events","Industry News","Staff Updates"]);
        }, 0);

    });

function HillbillyTabs(webPartTitles)
    {
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            $("#HillbillyTabs").append('<li><a href="#Tab'+index+'" id="TabHead'+index+'" onclick="SetActiveTab(this.id);">'+
title+'</a></li>').after('<div id="Tab'+index+'"></div>');
            $("span:contains('"+title+"')").each(function(){
                if ($(this).text() == title){
                   var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                   if ($(webPart).contents().html() != undefined)
                   {
                           webPart = $(webPart).contents();
                   }
                   $("#Tab" + index).append((webPart));
            }});
        }
        $("#tabsContainer").tabs();
        $(".s4-wpcell").show();
         $(".s4-wpcell-plain").show();

    }
</script>
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

No comments:

Post a Comment