読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript ライブラリ

面白い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が少ないのと、読み込むライブラリが多すぎるというのが残念だ。