jqueryのタブ

Question

私はjQueryのUIのタブを使用していますが、レンダリング時に完全にレンダリングする前の遅延は、検出しますタブが完全に処理されてレンダリングされる前に完全に混乱します。

私はタブがレンダリングを完了したときにおそらくコールバック機能が私の推測になると検出する方法を探しています。このように、タブが完全にレンダリングされる前に待機メッセージを表示することができます。

ありがとうございます！

Answer 1

私たちは仕事で同じ問題を抱えていました。正に言うと、ほとんどのJQueryでは、ページに負荷がかかると明らかな問題になることがあります。それは我々が最初にそのような親タブコンテナを隠して実際に準備ができたとき、それが唯一示されていますことを確認するために：

<div id="tabs" style="display: none;"> 

その後、document.ready関数の中で、我々は.tabs呼ばれてきた後、私たちはそのようにように、それが見えるように：

$(function() { 
    $("#tabs").tabs(); 

    $("#tabs").css("display", "block"); 
}); 

Answer 2

これは、コンテンツの上部にdivまたは2個を表示/非表示することによって行われます。 http://www.ajaxload.info/からはファンシーローディングGIFを入手できます。次に、あなたのページにDIVを配置することをお勧めします：

<div id="loading"> 
    <p><img src="loading.gif" /> Please Wait</p> 
</div> 

あなたはこのCSSを追加する必要があると思いますので、あなたは、これはデフォルトでは非表示したいでしょう：

#loading { display:none; } 

あなたは思いもセットアップしたい、あまりにも、このための表示：

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; 
      background-image:url("transparentbg.png"); } 

ファイルtransparentbg.pngは、約80％の不透明に設定さ25×25黒PNGだろう。次はjQueryを使ってこれを表示し、非表示にする方法が必要になります

showLoading(); 
$.post("data.php", {var:"foo"}, function(results){ 
    $("content").append(results); 
    hideLoading(); 
}); 

あなたが変更することができます：あなたはデータの外部のページを問い合わせるような何かをする必要がある場合に

function showLoading() { 
    $("#loading").show(); 
} 

function hideLoading() { 
    $("#loading").hide(); 
} 

は今、あなたはこれを使用することができますtab1.php、tab2.phpなどのdata.phpを外して、そのタブの適切なPHPページにリンクします。