[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