web-dev-qa-db-ja.com

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

すべて、

JqueryUIのネストされたタブを使用しています。タブの読み込み中に、タブテキストの横にAJAXスピナー画像を表示する方法があるかどうか疑問に思っていました。タブテキストを「読み込み中」に変更したくありません。 "。複数のタブが同時にまたは次々に読み込まれる場合は、各読み込みタブの横にスピナー画像を表示する必要があることを考慮してください。

助言がありますか？

ありがとう

jqueryjquery-uijquery-ui-tabs
26
Balu

タブにキャッシュを使用している場合は、このソリューションの方がおそらく適しています。コンテンツがまだページにない場合にのみ、ajaxの読み込みが表示されます。

$(".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>")
     }
    }
 })
40
jeroen.verhoest

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

私がそれをした方法は次のとおりです：

    $("#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が完了すると、実際のコンテンツに置き換えられます。

8
Kipper

バル、私は最近似たようなものが必要でした。私のプロジェクトでは、タブにタブタイトルを保持したいのですが、ajax-loadingタイプのアニメーションを追加しました。これが私が使用したものです：

$(".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」イベントを使用してアニメーションを削除します。複数のユーザークリックによってタブが破壊されるのを防ぐために、任意のタブ選択のすべてのアニメーションをremove（）します。

この問題はすでに解決しましたか？もしそうなら、解決策を共有してください。

5
shanabus

JQuery UI v1.12では、beforeLoadハンドラーを使用できます。

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