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) {
  ...
});

但请参阅Doc以找到合适的事件。

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'] }); 
        }       
    });
});

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

3 个答案: