jquery - UIスピニングプリローダーをブロックする

Question

jQuery Block UIプラグインを使用して（アップルが使用するような）回転するプリローダーを追加する方法について、誰かが洞察を得ることができるかどうか疑問に思いました。プリローダーは、AJAXコンテンツがロードされるまでスピンする必要があります。これはブロックUIで可能ですか？

どんな方向でも役に立ちます、ありがとう！

score 17 · Accepted Answer

次のように、Web から適切なアニメーション化された throbber 画像を見つけます。ズキズキする

非表示の throbber div を設定して表示します。

<div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

その div をメッセージとして使用するように blockUI に指示します。

$.blockUI({ message: $('#throbber') });

ajax 呼び出しが完了したら、throbber を kill します。

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

また、Ajax 成功 / エラーコールバックを使用して、完了ではなく、結果ごとに異なる blockUI を制御することもできます。

score 2 · Accepted Answer

はい、可能です。この Web サイトを使用して、任意のスタイルでプリローダーを Web サイトに追加できます...

アップデート：

詳細については、これを参照してください...

score 2 · Accepted Answer

mujimuから提供された回答を参考にして、わずかな問題を修正しました。「スロバー」の複数の使用法が同時に発生しています。私が見つけたのは、既存のブロックが解除される前にそれを起動すると、それが台無しになり、スロバーが機能しなくなるということでした.

これが私の解決策です...

function ReloadDetails(id) {
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') });
    $.get(...);
}

この ajaxLoaderPath は、仮想ディレクトリの問題を回避するために cshtml によって提供されます。

4 に答える 4