JQuery UIタブ - 「読み込み中...」メッセージ

Question

すべて、

Jquery UIのネストされたタブを使用しています。タブが読み込まれている間に、タブテキストの横にAJAX Spinnerイメージを表示する方法があるかどうかは疑問でした。私はタブのテキストを "Loading .."に変更したくありません。複数のタブが同時にまたは次々に読み込まれる場合、読み込みタブの横にスピナーイメージが表示されることを考慮してください。

すべての提案はありますか？

ありがとう

Answer 1

Balu、私は最近、何か類似している必要があります。私のプロジェクトでは、タブのタイトルを保持するが、ajaxをロードするタイプのアニメーションを追加するようにしました。ここに私が使用したものがあります：

$(".tabs").tabs({ spinner: '', 
       select: function(event, ui) { 
        $(".tabs li a .loader").remove(); 
        $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
        }, 
       load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); } 
       }); 

"スピナー"オプションは、タブのクリック時に "読み込み中..."効果を削除します。 "select"イベントは、選択されたタブを取得し、アニメーションを含む新しいスパンを追加することを可能にします。コンテンツがロードされたら、 "load"イベントを使用してアニメーションを削除します。複数のユーザーのクリックによるタブの破損を防ぐため、すべてのタブで選択したすべてのアニメーションを削除（）します。

この問題は既に解決していますか？その場合は、解決策を共有してください。

Answer 2

私はこれとは別の方法を使用しました。私は、タブのタイトルをそのままにして、タブ自体に「読み込み中」の情報を残したかったのです。

次のように私はそれをやった方法は次のとおりです。以前のポスターのように

$("#matchTabs").tabs({ 
     spinner: "", 
     select: function(event, ui) { 
     var tabID = "#ui-tabs-" + (ui.index + 1); 
     $(tabID).html("<b>Fetching Data.... Please wait....</b>"); 
     } 
    }); 

、私が変更されたタブのタイトルを防ぐために、スピンナー法を使用していました。新しいタブが選択されるとselectイベントが発生するので、現在選択されているタブのIDを取得し、デフォルトでajaxコンテンツがロードされるDIVを参照する変数を作成します。

IDを取得したら、DIV内のHTMLを読み込み中のメッセージに置き換えるだけです。 Ajaxが完了すると、それは実際のコンテンツと再び置き換えられます。

Answer 3

あなたのタブにキャッシュを使用している場合は、このソリューションが適切に適合します。コンテンツがページにない場合は、ajaxの読み込みのみが表示されます。 jQueryのUIのV1.12では

$(".tabs").tabs({ 
    cache:true, 
    load: function (e, ui) { 
    $(ui.panel).find(".tab-loading").remove(); 
    }, 
    select: function (e, ui) { 
    var $panel = $(ui.panel); 

    if ($panel.is(":empty")) { 
     $panel.append("<div class='tab-loading'>Loading...</div>") 
    } 
    } 
}) 

Answer 4

あなたはbeforeLoadハンドラを使用することができます：こんにちは

$('#tabs').tabs({     
beforeLoad: function(event, ui) { 
    ui.panel.html('Loading') 
} 
});