[JS]シンプルなものから高性能なものまで簡単に通知パネルを実装できるスクリプト -Backbone.Notifier
Post on:2012年6月28日
sponsors
通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。
デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグインを紹介します。
[ad#ad-2]
Backbone.Notifierの特徴
- ページの上部や中央に通知パネルをアニメーションで表示します。
- スタイルは通知、エラー、警告、成功など、さまざまなものが揃っています。
- スタイルはCSSベースでカスタマイズできます。
- 通知パネルの表示・非表示のタイミングを調整できます。
- 通知パネルを連携させることもできます。
Backbone.Notifierのデモ
機能が多すぎるくらいあるので、いくつかに絞って紹介します。
まずは、一番シンプルなものから。
デモページ：Default
最もシンプルなデモで、上部から通知パネルを表示します。
コードも非常にシンプルです。
notifier.notify("Hello World!");
デモページ：Warning
スタイルを警告に変えたものです。
notifier.warning("Hello World!");
[ad#ad-2]
デモページ：Advanced
通知パネルを連動して表示させることも可能です。
以下、コードが長くなるので省きます。
デモページ：Advanced
「Yes」をクリックすると、次に進みます。
デモページ：Modal + Buttons + Events
ボタンのイベントを取得することもできます。
デモページ：Transparent "Info" + (3 sec.) Loader
通知パネルを半透明にし、ローダーをつけます。
デモページ：Error + Slow Fading + Stays Until Click
表示・非表示のタイミングを調整できます。
デモページ：Ultimate Destruction
これまでのさまざまな機能を同時に組み合わせることもできます。
デモページ：3D module
通知パネルに3Dのアニメーションを与えることもできます。
カーソルに連動してグリグリ動きます。
Backbone.Notifierの使い方
Backbone.NotifierはjQueryベースで、underscore.jsとbackbone.jsを使った通知パネルをコントロールするフレームワークです。
外部ファイル
head内にスタイルシートを配置します。
<link rel="stylesheet" type="text/css" href="css/notifier.css">
ドキュメントの下（</body>のすぐ上あたり）にスクリプトを配置します。
<script type="text/javascript" src="dependencies/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="dependencies/underscore-1.3.3.min.js"></script> <script type="text/javascript" src="dependencies/backbone-0.9.2.js"></script> <script type="text/javascript" src="js/Backbone.Notifier.js"></script>
※Backbone.Notifier.jsはbackbone.jsの後に配置してください。
デモに使用しているローディング用の画像は、ダウンロードファイルに含まれています。
imgs/notifier-loader.gif
スクリプトのオプション
オプションではさまざまな項目が設定できます。
var notifier = new Backbone.Notifier({ // defaults
el: 'body', // container for notification (default: 'body')
baseCls: 'notifier', // css classes prefix, should match css file and can be changed to avoid conflicts.
types: ['warning', 'error', 'info', 'success'], // available notification styles
type: null, // default notification style (null / 'warning' / 'error' / 'info' / 'success')
dialog: false, // whether display the notification with a title bar and a dialog style.
// - sets 'hideOnClick' to false, unless defined otherwise
// - sets 'position' to 'center', unless defined otherwise
// - sets 'ms' to null, unless defined otherwise
modal: false, // whether to dark and block the UI behind the nofication (default: false)
message: '', // default message content
title: undefined, // default notification title, if defined, causes the notification
// to be 'dialog' (unless dialog is 'false')
ms: 5000, // milliseconds before hiding, (null || false => no timeout) (default: 10000)
'class': null, // additional css class
hideOnClick: true, // whether to hide the notifications on mouse click (default: true)
loader: false, // whether to display loader animation in notifactions (default: false)
destroy: false, // notification or selector of nofications to hide on show (default: false)
opacity: 1, // opacity of nofications (default: 1)
top: -500, // distance between the notifications and the top edge (default: 0)
fadeInMs: 500, // duration (milliseconds) of notification's fade-in effect (default: 500)
fadeOutMs: 500, // duration (milliseconds) of notification's fade-out effect (default: 500)
position: 'top', // default notifications position ('top' / 'center')
zIndex: 10000, // minimal z-index for notifications
screenOpacity: 0.5, // opacity of dark screen background that goes behind for modals (between 0 to 1)
width: undefined, // notification's width ('auto' if not set)
template: function(settings){ var html = ...; return html; } // custom html structure
});
sponsors
