[Firefox OS][FxOS]toast的なものを出すコード


丸山です。

Firefox OS勉強会でちらほらお話させて頂いてますが、
Firefox OSでtoastっぽいものを表示するコードについて、
改めて記載します。
(スライド記載分のみでは見にくいかと思いますので)

htmlファイル

<head>
<link rel="stylesheet" type="text/css" href="res/status.css">
</head>
<section role="status" id="toast" hidden>
	<p><progress></progress>  Connectiong<BR>      Server...</p>
</section>

上記で使用している「status.css」は以下よりダウンロードしてください。
http://buildingfirefoxos.com/building-blocks/status.html

jsファイル

function toastManager() {
}

toastManager.prototype = {
/**
 * 4秒後にToastを消す
 */
scheduleToast : function() {
	window.setTimeout(function() {
		document.getElementById("toast").hidden = true;
	}, 4000);
},

/**
 * closeするまで表示しっぱなし
 * (サーバ処理中などに使用)
 */
showToast : function() {
	document.getElementById("toast").hidden = false;
},

/**
 * 4秒後に消えるToastを表示
 */
showToastSchedule : function() {
	document.getElementById("toast").hidden = false;
	toastManager.prototype.scheduleToast();
},

/**
 * Toastの消去
 */
closeToast : function() {
	document.getElementById("toast").hidden = true;
},

/**
 * Toast内の文章を変更
 */
changeToastMessage : function(string) {
	var toast = document.getElementById("toast");
	while(toast.firstChild){toast.removeChild(toast.firstChild);}
	var text = document.createElement("p");
	text.innerHTML = string;
	toast.appendChild(text);
}
}

なお、発表に使用したスライドのURLは以下です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">