Попробовав несколько вариантов (вкладки пользовательского интерфейса jQuery и вкладки jQuery Tools) и не получив правильных результатов ни от одного из них ... вот и я.
Что я хочу сделать:
Динамически генерировать всю структуру вкладок при загрузке страницы. Данные, которые будут использоваться для создания вкладок, находятся в базе данных mySql и извлекаются через getJSON ().
Я, как правило, возвращаю ВСЕ мои данные, и они, кажется, помещаются в правильное местоположение DOM (то есть в DIV моих «вкладок»), но когда я вызываю («#tabs»). Tabs (); функции, вкладки не отображаются правильно.
Я могу предоставить код, но хотел бы посмотреть, что предлагают другие. Кто-нибудь сталкивался с проблемой динамического создания всей структуры вкладок? Кто-нибудь заставить его работать правильно?
Любые мысли очень ценятся.
Хорошо, вот код, который я использую для создания вкладок, я публиковал это раньше, но, как я уже говорил в оригинале, я хочу посмотреть, делал ли кто-нибудь еще динамическое создание всей структуры вкладок. .
Используя это, я получаю все «вкладки», уложенные вертикально, со всеми «панелями» под ними, снова уложенные вертикально.
var stateData;
$.getJSON("getStateData.php", function(data) {
stateData = data;
var $theLastGroup = "zzzzz";
var $ulItems = "<ul class='groupTabs'>\n";
var $divItems = "";
$.each(stateData, function(i,jsonData) {
if( $theLastGroup != jsonData.groupName )
{
$ulItems = $ulItems+"<li><a href='#"+jsonData.groupName+"'>"+jsonData.groupID+"</a></li>\n";
if( i > 0 )
{
$divItems = $divItems+"</div>\n";
}
$divItems = $divItems+"<div id='"+jsonData.groupName+"'>\n";
$theLastGroup = jsonData.groupName;
}
$divItems = $divItems+"<span sname='"+jsonData.stateName+
"' lat='"+jsonData.centerLat+
"' lon='"+jsonData.centerLon+
"' zom='"+jsonData.zoom+"' >"+jsonData.stateName+"</span> \n";
});
$ulItems = $ulItems+"</ul>\n";
$divItems = $divItems+"</div>\n";
$("#tabs").append($ulItems);
$("#tabs").append($divItems);
$("#tabs").tabs();
});
05-20-2011 - У кого-нибудь еще есть мысли по этому поводу? Я пропустил финал </div>, но это не имело значения .... (я добавил код выше).