0

考虑以下：

    var ids = [];
    function loadFeeds(id, terms) {
        $("#loadingdiv").removeClass("ui-helper-hidden");
        $('#' + id).empty(); 
      try {
            $.getJSON('https://mysite.com/search.json?q=' + terms', function(data) {
                $.each(data.results, function(i, data) { 
                $('#' + id).append('<tr><td> + data.user + '</td><td>' + data.created + '</td><td>' + data.text + '</td></tr>');                 
                });
            });
        }
        catch (e) {
            alert('Error creating feed - ' + e.Message);
        }
    }
    function loopids()
     {
       for(i=0;i&lt;ids.length;i++)
       {
          loadFeeds(ids[i][0], ids[i][1]);       
       }
     }
    function createTabsList()
     {
       $("#tabs").append('<ul id="tabsul"></ul>');
       for(i=0;i&lt;ids.length;i++)
       {
         $("#tabsul").append('<li><a href="#tabs-' + ids[i][0] +'">Test</a></li>');
       }
     }
... PAGE CODE ...
<div class="content clearfix">
          <div id="tabs" class="ui-tabs">
... REPEATER CODE ...
<div>
                      <xsl:attribute name="id">
                        tabs-<value-of select="@id"/>
                      </xsl:attribute>
                        <table class="display">
                          <tr><th>Search Results</th></tr>
                        </table>
                        <table class="display">
                          <xsl:attribute name="id">
                            <value-of select="@id"/>
                          </xsl:attribute>
                              <thead>
                                <tr>
                                    <th>
                                        User
                                    </th>
                                    <th>
                                        Date
                                    </th>
                                    <th>
                                        Message
                                    </th>
                                </tr>
                            </thead>
                          <tbody></tbody>
                        </table>
                        <script type="text/javascript">
                            ids.push(['<xsl:value-of select="@dataid"></value-of>', '<xsl:value-of select="@txtSearchParams" />']);
                        </script>
                      </div>
... END REPEATER CODE ...
            </div>
        </div>

我可以让表格正确加载 - 检查 id，一切都正确，但无论我在哪里或如何调用 $("tabs").tabs() - 它都无法正确呈现内容。当它确实呈现“选项卡”时，其他表永远不会消失，并且单击选项卡会导致引发“未捕获的异常”。

如何让动态选项卡在这种情况下工作。

4

1 回答 1

0

所以我不能完全让它工作，所以我使用动态创建的按钮创建了一个解决方法，并手动从 jQuery UI 添加 CSS 类。

function setTabs(){
        try
        {
         $("div.tabs > div:gt(0)").hide();
          for(var i=0;i&lt;ids.length;i++)
          {
            createButton(i, ids[i][1]);       
          }
          $(".tb").click(function(){
            $(".tb").removeClass('ui-state-active');
            //alert($(this).attr('id'));
            $(this).addClass('ui-state-active');
          });
          $(".Title").each(function(){
                var txt = decodeURIComponent($(this).text());
                $(this).text(txt);
            });
          loopids();
          $(".tb").first().addClass('ui-state-active');
          $("#loadingdiv").addClass('ui-helper-hidden');
        }
        catch(e)
        {
          alert("Error in setTabs - " + e.Message);
        }
    }

这是关键功能。如果有人碰到这个，我总是可以解释更多。

于 2012-08-27T18:46:45.623 回答