ajax処理に最適!?ローダー、処理結果通知をかねそなえた「Jquery-async」

面白いjQueryプラグインがあったのでご紹介。処理中のローダー、処理完了時の通知アニメーションを兼ね備えたjQueryプラグイン。

Jquery-async

上記ページからDemoを試してみるとわかるが、ajax処理に最適ですな。ローダーのアニメーションや、処理完了通知のデザインもなかなかよい。

実装方法

Demoページの一番上に載っているDemoの実装方法を書いておく。

HTML

headタグでは以下を読み込む。この機能のためだけにこんなに読み込むのは若干気が引けるが。。。

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="../js/jquery.loader.js"></script>
<script src="../js/jquery.async.js"></script>

bodyタグでは以下のようにマークアップ。

<a id="button1" class="btn btn-info"> Test asynchronous user action</a>
<span id="button1-buttons" style="display:none;">
    <a id="button1-done" class="btn btn-success" >Action succeeds</a>
    <a id="button1-fail" class="btn btn-danger">Action failed</a>
</span>

JavaScript

javascriptは以下の通り。deferredという引数を与えて、成功時はresolve。失敗時はrejectメソッドを呼び出すと、successやらerrorなりが表示されるよう。

$('#button1').async(function(deferred){
    $('#button1-buttons').show();

    $('#button1-done').click(function(){
        deferred.resolve();//成功時の処理
        $('#button1-buttons').hide();
    });
    $('#button1-fail').click(function(){
        deferred.reject();//失敗時の処理
        $('#button1-buttons').hide();
    });
});

リッチなアニメーションで、ajax意外にもいろいろ使えそうだな～。Documentが少ないのと、読み込むライブラリが多すぎるというのが残念だ。