[JS]シンプルなものから高性能なものまで簡単に通知パネルを実装できるスクリプト -Backbone.Notifier

通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。
デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグインを紹介します。

サイトのキャプチャ

Backbone.Notifier -GitHub

Backbone.Notifierの特徴

  • ページの上部や中央に通知パネルをアニメーションで表示します。
  • スタイルは通知、エラー、警告、成功など、さまざまなものが揃っています。
  • スタイルはCSSベースでカスタマイズできます。
  • 通知パネルの表示・非表示のタイミングを調整できます。
  • 通知パネルを連携させることもできます。

Backbone.Notifierのデモ

サイトのキャプチャ

デモページ

機能が多すぎるくらいあるので、いくつかに絞って紹介します。
まずは、一番シンプルなものから。

サイトのキャプチャ

デモページ:Default

最もシンプルなデモで、上部から通知パネルを表示します。
コードも非常にシンプルです。

notifier.notify("Hello World!");
サイトのキャプチャ

デモページ:Warning

スタイルを警告に変えたものです。

notifier.warning("Hello World!");

サイトのキャプチャ

デモページ: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.jsbackbone.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
	});

top of page

©2017 coliss