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

Post on:2011年1月27日

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

デモのキャプチャ

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

[ad#ad-2]

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

デモのキャプチャ

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

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

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
パネルを閉じる時のコールバック関数

sponsors

top of page

©2024 coliss