Question

尝试了几个选项（jQuery UI选项卡和jQuery工具选项卡）并且没有从任何一个获得正确的结果...在这里我再次。

我想做什么：

在页面加载时动态生成整个选项卡结构。用于构建选项卡的数据位于mySql数据库中，通过getJSON（）检索。

我倾向于返回所有我的数据并且它似乎被放置在正确的DOM位置（即在我的'tabs'DIV中），但是当我调用（“#tabs”）时.tab（）;功能，选项卡无法正确显示。

我可以提供代码，但希望看到其他建议。有没有人遇到动态生成整个标签结构的问题？有人让它正常工作吗？

非常感谢任何想法。

好的，这是我用来创建标签的代码，我之前已发布过，但正如我在原文中所述，我想看看是否有其他人已经完成了整个标签结构的动态创建。

使用此功能，我将所有“标签”垂直堆叠，其下方的所有“窗格”再次垂直堆叠。

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n";

    });
    $ulItems = $ulItems+"</ul>\n";
    $divItems = $divItems+"</div>\n";


    $("#tabs").append($ulItems);
    $("#tabs").append($divItems);

    $("#tabs").tabs();
});

05-20-2011 - 任何人对此都有任何想法？我错过了最后的</div>，但这并没有什么区别......（我在上面添加了代码）。

Answer 1

如果我没有弄错的话，你的问题就是你的代码生成的标签的对齐。

如果那是真正的问题。尝试为您在代码中使用的类编写一个简单的无序列表css标记。

像这样......

ul.groupTabs li{float:left; padding 10px; display:block;}

希望这能帮到你......

〜GIO

自动生成jquery选项卡

1 个答案: