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

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

サイトのキャプチャ

Jquery Notification Plugin.

デモ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

エラー(背景:レッド)のデモ

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

デモのキャプチャ

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
});

top of page

©2017 coliss