27

全て、

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

助言がありますか？

ありがとう

4

4 に答える 4

41

タブにキャッシュを使用している場合は、おそらくこのソリューションの方が適しています。コンテンツがまだページにない場合にのみ、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>")
     }
    }
 })
于 2010-12-02T09:13:14.423 に答える
8

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

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

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

于 2010-05-13T12:50:46.833 に答える
5

バル、私は最近似たようなものが必要でした。私のプロジェクトでは、タブのタイトルを保持したまま、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」イベントを使用してアニメーションを削除します。ユーザーが複数回クリックしてタブが破壊されるのを防ぐために、選択したタブのすべてのアニメーションを remove() します。

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

于 2009-12-18T14:56:09.953 に答える