javascript - 如何使用 jQuery UI 选项卡确定选项卡的内容何时完成呈现

Question

我正在使用jQuery UI的标签视图。我在下面包含了我的 HTML，它是我所拥有的精简版。

<div id="UserDetailsTabs">

     <ul>
          <li><a href="#tabs-1">User Details</a></li>
          <li><a href="#tabs-2">Impersonation Details</a></li>
     </ul>

     <div id="tabs-1">
          <p>Tab 1 content</p>
     </div>

     <div id="tabs-2">
          <p>Tab 2 content</p>
     </div>

</div>

这是我创建选项卡的 jQuery 代码：

$(document).ready(function () {
     $("#UserDetailsTabs").tabs();
});

有没有办法在单击选项卡后确定选项卡的内容何时完成呈现？我的意思是如果我点击tabs-2，是否有一个函数可以在所选选项卡的内容完成渲染后调用？

Answer 1

$("#UserDetailsTabs").tabs({load: function(event, ui) { 
    alert('tabs loaded')    
});
//This will trigger when user clicks a tab after the page load
$( "#UserDetailsTabs" ).tabs({
   show: function(event, ui) { alert('clicked on the tabs'); }
});

Answer 2

例如：

$( ".selector" ).tabs({
   create: function(event, ui) { ... }
});

$( ".selector" ).bind( "tabscreate", function(event, ui) {
  ...
});

但请参阅文档以找到适当的事件。

Answer 3

上面coolguy的回答是正确的。我花了一段时间才找到并整理出来，所以我想我会发布一个更完整的例子。这在很大程度上来自 Tabs 文档。唯一添加的是“加载：”部分。

$(function() {
    $( "#tabs" ).tabs({
        active: <?php echo $tab ?>,
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
            });
        },
        load: function( event, ui ) {
            //tab is loaded...now execute this code...
            $(".ResultsTable").tablesorter({ widgets: ['zebra'] }); 
        }       
    });
});