ホーム > プログラミング, モバイル, Javascript > jQuery Mobileでトースト通知

jQuery Mobileでトースト通知


jQueryMobileでシステムからのメッセージを表示する場合に、ダイアログ表示ではなくトースト通知っぽい表示をしたかったのでこんな関数を作ります。

karua.ui.message.showToast = function (message) {
var box = $("<div class='ui-loader ui-overlay-shadow ui-body-a ui-corner-all'>"
+ message + "</div>")
.css({
"padding": "7px 25px 7px 25px",
"display": "block",
"opacity": 0.8
})
.appendTo($.mobile.pageContainer);

var left = Math.floor(($(window).width() – box.width()) / 2);
box.css({
"top": $(window).scrollTop() + 100,
"left": left
})
.delay(1500)
.fadeOut(400, function () {
$(this).remove();
});
};

ViewModel側でメッセージを表示するの良くない。とかはとりあえずおいておいて、こんなふうに呼び出せば。

karua.viewModel.topViewModel = function () {
this.keyword = ko.observable("");
this.find = function () {
if (this.keyword() == "") {
karua.ui.message.showToast("検索キーワードが空だよ");
return;
}
};
};

こんな感じで表示される。うーん。微妙に右によってますね。。。

image

「jQuery Mobile toast」「jQuery Mobile トースト」 とかだとあんまり引っかからなかったけれど、「jQuery Mobile メッセージ」「jQuery Mobile ポップアップ」とかだと同じ事やっている人結構引っかかるのね。トースト通知ってあんまりメジャーな言い方じゃないのかな。

プラグインになってないのかなーと思ったら、nugetにjquery.mobile.messageという名前で、トースト通知を行うjQueryのプラグインがすでに登録されてた。はぅー。

https://packages.nuget.org/packages/jQuery.Mobile.Message/1.6.9

  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。