jqueryタブのコンテンツがロードされる前に 'loading'を表示する方法

Question

jquery UIタブを使用しており、タブにロードされたコンテンツが別のページにあります。したがって、それはajax経由でロードされます。ページの読み込みには、タブの内容が読み込まれる部分が完全に空になるまでに時間差があります。コンテンツが読み込まれるまで「読み込み中....」のようなメッセージを表示する方法はありますか？

私のコードは次のとおりです。私はこのプラグインのspinnerオプションを使用して試してみましたが、それが私のために動作していないよう

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

      <div id="tabs"> 
       <ul> 
        <li><a href="/failedPrescreenReport.jsp</a></li> 
        <li><a href="/failedverificationreport.jsp</a></li> 
        <li><a href="VerificationReport.action</a></li> 
       </ul> 
      </div> 

...

Answer 1

Iを（多分私のCSSが台無しにされます） jquery ajaxStart、ajaxStop、ajaxErrorイベントを聞いて、ajaxStartの "読み込み中"ポップアップを表示し、AjaxStopとajaxErrorに隠すことを推奨します。このようにして、追加のプログラミングなしでajaxリクエストが保留されているときは、読み込みポップアップが表示されます。例えば

：

$(function() { 
    $(this).ajaxStart(function() { 
    $("#ajaxLoading").show(); }); 
    $(this).ajaxStop(function() { 
    $("#ajaxLoading").hide(); }); 
}); 

Answer 2

ちょうど役立つかもしれないことが最近jquery pluginを書きました。これは要素の上にスピンナを持つマスクを配置するので、あなたの呼び出しの前にマスクを表示し、例えばコールバック関数でマスクを解除することができます。

Answer 3

jquery blockuiはこれに最適です。非常に迅速で洗練されたソリューションです。

Answer 4

blockUIは素晴らしいですが、私は賭けたいと思っています。http://plugins.jquery.com/project/loadingは、この状況に適しています。

Answer 5

余分なものは必要ありません。スパンタグをアンカーに追加してください。私はそれがjQueryのドキュメントでは見逃されていると思います。

例：

<script type="text/javascript"> 
    $(function(){ 
     $("#tabs").tabs(); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li> 
     <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li> 
     <li><a href="VerificationReport.action"><span>Tab 3</span></a></li> 
    </ul> 
</div> 

スパンタグは重要な部分です。私がやった

Answer 6

最善のことはちょうどこのAJAX駆動のタブのだった...あなたは

$（ "＃facilityTabContainer"）は、この答えを愛することを願っていたタブ（{panelTemplate： "ロード..." 、 が選択された：0, スクロール可能：true、 キャッシュ：false}）;

また、jquery.ui.tabs内のpanelTemplateを変更して、アプリケーションのすべてのタブが自動的に「読み込みテキストまたはイメージ」を取得するようにすることもできます。 これもまたあなたの最初のタブの読み込みの問題を解決するものと推測します..