星屑日記

近況

http://deco-mayu.appspot.com/

　jQuery Mobileを使ってTumblrアプリを作ってます。参考はオフィシャルサイトのみでなんとか奮闘中。OAuthで誰でも使えるようにしているのでよかったらどうぞ。

jQuery Mobileでポップアップメッセージをオーバーレイ表示させる

　それで今取り組んでいるTumblrアプリのこぼれ話。jQuery Mobileではページロードに失敗すると、失敗したことをポップアップメッセージとして画面にオーバーレイして知らせてくれる。このメッセージ表示機能が結構便利そうなのにメソッドとして用意されてないっぽい(あったら教えてください)。自分の作っているTumblrアプリでReblogやLikeをポストしたときの成功か失敗の告知にこのメッセージ表示機能を使いたかったので、jQuery Mobileのソースコード内を探してみた。以下、該当部分をちょこっと修正したもの。jQueryがわかっていれば簡単に理解できる単純なコード。

$("<div class='ui-loader ui-overlay-shadow ui-body-b ui-corner-all'><h1>あーりんわっしょい</h1></div>")
    .css({
        display: "block",
        opacity: 0.96,
        top: window.pageYOffset+100
    })
    .appendTo("body").delay(800)
    .fadeOut(400, function(){
        $(this).remove();
    });

classのui-body-☆の☆の部分をaからeのどれかにすることで見た目の色を変えることができる。あと表示の時間とか位置はjQueryの資料を調べてほしい。該当するコードが見つかったので、ここを抜き出して自分用に関数作ってみた。引数として表示させたい文字列を与える。

function jqmSimpleMessage(message) {
    $("<div class='ui-loader ui-overlay-shadow ui-body-b ui-corner-all'><h1>" + message + "</h1></div>")
        .css({
            display: "block",
            opacity: 0.96,
            top: window.pageYOffset+100
        })
        .appendTo("body").delay(800)
        .fadeOut(400, function(){
            $(this).remove();
        });
}

https://gist.github.com/716577

GitHubにも置いておく。今作っているTumblrアプリは極力jQuery Mobileだけを使用して構築したいと考えているので、この調子ですべてをjQuery Mobile内でまかなっていきたい。