0

のタブビューを使用してい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();
});

タブをクリックした後、タブのコンテンツのレンダリングがいつ終了したかを判断する方法はありますか？つまり、タブ2をクリックすると、選択したタブのコンテンツのレンダリングが終了した後に呼び出すことができる関数はありますか？

4

3 に答える 3

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'); }
});
于 2012-07-05T07:34:05.600 に答える
0

例えば：

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

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

ただし、適切なイベントを見つけるには、ドキュメントを参照してください。

于 2012-07-05T07:36:30.390 に答える
0

上記のcoolguyの答えは正しいです。これを見つけて整理するのに時間がかかったので、より完全な例を投稿したいと思いました。これは、大部分がタブのドキュメントからのものです。追加されたのは「load:」セクションだけです。

$(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'] }); 
        }       
    });
});
于 2014-12-05T20:40:58.917 に答える