[JS]カスタマイズ性に優れた、メッセージのパネルを一時的に表示するスクリプト -Easy Notification

設置が簡単で、オプションも豊富に用意されカスタマイズ性にも優れた、メッセージのパネルをアニメーションで表示・非表示するjQueryのプラグインを紹介します。

jQuery plugin: Easy Notification
デモページ：1

[ad#ad-2]

上記デモページ：1では、ページのロード時にメッセージの黄色いパネルを表示します。

パネルを消去するには、「Close」ボタンをクリックします。

デモは他にも二つ公開されています。

• デモページ：2
  クリックでパネルを表示。
• デモページ：3
  クッキー対応、初回のみパネルを表示。

Easy Notificationの特徴

• マークアップは非常にシンプル、しかもカスタマイズ性は強力
• あらゆるエレメントに設置が可能
• トリガーとなるイベントは、クリックやページロードなどに選択可能
• クッキーを使用して、一度だけ表示することも可能
  不必要に繰り返し表示しません。

[ad#ad-2]

Easy Notificationの実装

パネルのHTML

パネルはシンプルなHTMLで生成されます。

<div id="easyNotification">
	Notification!
	<span class="close">Close</span>
</div>

JavaScript

「jquery.js」と「easy.notification.js」を外部ファイルで記述し、下記のスクリプトを記述します。

$.easyNotification({
	text: 'Your custom text',
	parent: '#someElement'
});

Easy Notificationのオプション

id

生成するパネルのid名

text

生成するパネルに表示するテキスト（HTMLコード）

closeClassName

クローズ箇所のspan要素のclass名

closeText

クローズのテキスト

cookieEnable

クッキーの利用の有無

cookieName

クッキーの名称

cookieValue

クッキーの値

cookieDays

クッキーの期限

delay

パネルの表示の遅延時間

autoClose

パネルを自動で非表示

duration

autoCloseを使用時の時間

callback

パネルを閉じる時のコールバック関数