[JS]古いブラウザではそれなりに、モダンブラウザではよりかっこよく表示する通知パネルのスクリプト -smoke.js
Post on:2013年7月8日
sponsors
アラートや確認、クイズ、メッセージなどを表示した通知パネルを素早く快適に表示する単体のスクリプトを紹介します。
スクリプトはアニメーションや背景はCSSに担当させているので、より軽量に設計されています。
最近のデモページは、ほんとかっこいいのが増えてきましたね。
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など他の実装方法は下記をご覧ください。
テーマ
smoke.jsではデザインをテーマで簡単に変更できます。
下記にいくつかテーマが用意されています。
スタイルシートベースなので、オリジナルのテーマを作ることも手軽ですね。
sponsors
