Tabbed web part zone SharePoint 2013


I’ve just been looking into this for a tabbed web part zone and recreated some script found online here to work with SharePoint 2013 ​​​​​​. I’ve modified it to take the image from the web part header as well so it renders it in the tab.

​(function ($) {

$.fn.wpTabify = function () {
 if($(‘.ms-WPAddButton’).size() == 0){
      return this.each(function(i){
        var tabList = $(‘<ul class=”wpt-ui-tabs-nav”/>’);
        var panels = $(‘<div class=”wpt-ui-tabs-wrapper”/>’);
       $(this).find(‘div[id^=”MSOZoneCell_”]’).each(function(j){
 $(tabList).append(‘<li>’ + ‘<img src=”‘ + $(this).find(‘h2.ms-webpart-titleText img’).attr(‘src’) + ‘”/>’ + ‘<a href=”#ui-tab-panel’ + i + j + ‘”>’ + $(this).find(‘h2.ms-webpart-titleText’).text() + ‘</a></li>’);
          var thisPanel = $(‘<div id=”ui-tab-panel’ + i + j + ‘” class=”wpt-ui-tabs-panel”/>’);
           var panelContents = $(this).detach();
          $(thisPanel).append($(panelContents).find(‘.ms-WPBody’).html());
    $(panels).append(thisPanel);
});
if($(tabList).find(‘li’).size() > 0){
          $(this).prepend(panels);
          $(this).prepend(tabList);
          $(this).tabs();}
});
}
else {
return false;
}
};
})(jQuery);​​

Use this to call the function

<script type=”text/javascript”>
$(document).ready(function(){
  $(“div.my-web-part-tabs”).wpTabify();
});
</script>​

It uses jQuery UI to render. so use the bellow links.

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css” />​
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s