[JS]古いブラウザではそれなりに、モダンブラウザではよりかっこよく表示する通知パネルのスクリプト -smoke.js

アラートや確認、クイズ、メッセージなどを表示した通知パネルを素早く快適に表示する単体のスクリプトを紹介します。

スクリプトはアニメーションや背景はCSSに担当させているので、より軽量に設計されています。

smoke.js
smoke.js -GitHub

最近のデモページは、ほんとかっこいいのが増えてきましたね。

• smoke.jsのデモ
• smoke.jsの使い方

smoke.jsのデモ

デモはデスクトップ用のモダンブラウザ、iOS Mobile Safariでご覧ください。
IEは6+に対応しており、CSS3アニメーションが無しの状態で表示されます。

デモページ

まずは、定番のalert。
メッセージと「ok」ボタンだけの通知パネルです。

デモページ：alert

2つ目はconfirm。
2つのボタンで異なる結果を表示できます。

デモページ：confirm

3つ目はprompt。
入力したテキストが次のパネルに反映されます。

デモページ：prompt

4つ目はquize。
3つ以上の選択肢を表示し、正解や不正解などを表示できます。

デモページ：quize

最後はsignal。
一定時間後に非表示にします、通常操作で非表示にすることも可能です。

デモページ：signal

ついでに、IEでの表示も。

デモページ：alert：IE8での表示

smoke.jsの使い方

Step 1: 外部ファイル

当スタイルシート、スクリプトを外部ファイルとして記述します。

<link rel='stylesheet' type='text/css' href='smoke.css'>
<script type="text/javascript" src="smoke.js"></script>

Step 2: HTML

通知パネルのトリガーにはrel属性を使用します。
※relのデータは自由に定義できます。

<a href="#" rel="demo-alert">alert</a>
<a href="#" rel="demo-confirm">confirm</a>
<a href="#" rel="demo-prompt">prompt</a>
<a href="#" rel="demo-quiz">quiz</a>
<a href="#" rel="demo-signal">signal</a>

Step 3: JavaScript

スクリプトに通知パネルの内容とトリガーを指定し、実行します。
alertの場合は、下記のようになります。

smoke.alert("Can I ask you a question?", function(e){
	
}, {
	ok: "Yep",
	cancel: "Nope",
	classname: "custom-class"
});

一定時間後に自動で非表示にするsignalは、下記のようになります。

smoke.signal("Congratulations! You have just one a free iPod Touch!", function(e){

}, 5000);

prompt, confirm, quizeなど他の実装方法は下記をご覧ください。

• docs -smoke.js

テーマ

smoke.jsではデザインをテーマで簡単に変更できます。
下記にいくつかテーマが用意されています。

• themes -smoke.js

スタイルシートベースなので、オリジナルのテーマを作ることも手軽ですね。