Adding Webpart zone dynamically

Question

I am trying to create a tab component which bring tabs title and content from sharepoint list. In a tab content, I also want to show files from document libraray.
I am currently using SPServices to bring data of Tab Title, Content and Documents. But performance is relatively slow.
I am thinking of adding webpart zone inside tab content, so I can get documents directly instead of querying it. Is it possible to add webpart zone inside Tab Content using javascript?

Answer 1

Hi,
You can use the JQuery UI tabs to create the tabs and place the web parts.  The following article shows how to use the JQuery UI tabs in association with Web Parts.
All you need is a couple of web parts and content editor web part for your JavaScript library code.
Even though article is based on SharePoint 2013/Office 365, it works well with SharePoint 2010.  Please watch the Youtube video embedded in the following article, you will get clear idea how to use this, it is pretty easy.
http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42
<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<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(["Issue","Image Viewer","Time","Speakers","States","Cities","SlideShow"]);
}, 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>
Please don't forget to mark it answered, if your problem resolved or helpful.