[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification

いろいろなサイトでよく見かける、アニメーションでスライド表示する通知パネルを実装するjQueryのプラグインを紹介します。
パネルはページ上部に表示されスクロールしても定位置のままです。また、時間差で表示させることもできます。

Jquery Notification Plugin.

[ad#ad-2]

• Notificationのデモ
• Notificationの実装

デモ

デモでは、さまざまなタイプのメッセージや時間差、AJAX, PHPを併用したものがあります。

デモページ

成功、エラー、警告、通常のメッセージ用のスタイルもあらかじめ用意されています。

エラー（背景：レッド）のデモ

指定秒後に自動で閉じたり、遅れて表示させることもできます

2秒後に自動で閉じるデモ

[ad#ad-2]

Notificationの実装

外部ファイル

「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。

<script src="jquery.js"></script>
<script  src="js/jquery_notification_v.1.js"></script> 
<link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/>

JavaScript

showNotification(params); 

「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。

showNotification({
message: "This is a sample Success notification",
type: "success"
});

時間差は「duration」です。
2秒後に自動で閉じるのは、下記のようになります。

showNotification({
message: "This is Auto Close notification. Message will close after 2 seconds",
autoClose: true,
duration: 2
});