Question

我正在创建一个信息仪表板，以显示Web应用程序的各种操作的结果。

我想在表格中显示数据，按标签组织，即每个标签都是不同的类别和相应的表格。问题是需要根据ajax响应动态创建这些选项卡和表。

现在我的html中的标签有这个骨架：

<div id="tabs">
  <ul></ul>
</div>

从我的ajax请求中，我将所有类别和所有数据作为JSON，并在javascript中获取：

function(data){
    //making the tab links and content divs
    $.each(data.cat, function(){
      $('#tabs ul').append('<li><a href="#'+this.id+'">'+this.name+'</a></li>');
      $('#tabs').append('<div id="'+this.id+'"></div>');
    }
    //making the tab content
    //cycle through all results, adding each to the table in div of its category
    $.each(data.results function(){
       var selector = '#' + this.catid + ' table tbody';
       $(selector).append('<tr><td>'+this.something+'</td><td>'+ 
            this.somethingelse + '</td></tr>');
    }
    $( "#tabs" ).tabs();
}

现在正在“正常工作”。它适当地将数据放入正在创建的正确div中，但是当我调用tabs（）时样式没有发生，所以我只有div在彼此之下。我知道这个问题 - 这些div是DOM的新手，jquery没有看到它们，但我不知道如何解决它！

Answer 1

jQuery在你调用.tabs（）时看到修改后的DOM，如果在调用你的ajax之前调用了tabs，那么使用.tabs（'add'...）是正确的方法使用（见下文）。在旁注中，您的代码中存在一些Javascript错误，但它确实有效：正如您发布的那样：http://jsfiddle.net/highwayoflife/AcV3H

要添加新标签，您应该使用.tabs('add' ...)方法。

.tabs（“add”，url，label，[index]）

添加新标签。第二个参数是一个URL，它只包含一个片段标识符，用于创建页内选项卡，或者一个完整的URL（相对或绝对，没有跨域支持），可以将新选项卡转换为Ajax（远程）选项卡。第三个是从零开始的位置，插入新选项卡。可选，默认情况下，末尾会附加一个新选项卡。

注意：使用.tabs（“add”，...）动态创建的标签的id为ui-tabs-NUM，其中NUM是自动递增ID。

所以你的代码可能看起来像......

function(data) {
    $('#tabs').tabs();
    ...
    $.each(data.cat, function() {
        $('#tabs').tabs('add', this.id, this.name);
    });
}

来自动态创建的DIVS的JQuery UI选项卡

1 个答案: