[jQuery]これスゴ、twitterのような通知バーを表示するjQuery Notify bar

Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。
ページの上部にアニメーションされながら表示されるあの通知バーです。

via:Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」

というわけで、さっそく試してみました。

本命は、'Notify Bar' pluginで紹介されているのですが、導入はいたって簡単。

まず、jQueryをダウンロード
(ver1.4.2で試したところ、稼動しました。)

次に、githubのjQuery-Notify-barから
jquery.notifyBar.js
jquery.notifyBar.css
をダウンロードします。

後は、たったこれだけのソースコードで出現します。

<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" /> <script type="text/javascript" src="./jquery-1.4.2.min.js" ></script > <script type="text/javascript" src="./jquery.notifyBar.js" ></script > <script type="text/javascript" > $(function () { $.notifyBar({ html: "Jquery is so cool", delay: 2000, animationSpeed: "normal" }); }); </script >

実際に試して結果↓

上のバーの色は、灰色なのですが、cls:"error"と設定することで、赤色に変更することができます。
(実行結果は下の画像)

さらに、cls: "success"とすることで、緑色に変更することもできます。

他にもパラメータの設定することで、バー上に「×」ボタンを付けたりすることができます。

もちろん、メッセージや表示スピードなどの各種設定を行うことができます。

詳しいパラメータをこちらからちょっと引用させていただきます。

Parameter	Description	Type	Default
html	What text will be inside bar, can be HTML (表示させたい文言はここで)	String [optional]	"Your message here"
delay	How long bar will be delayed, doesn't count animation time.	Integer [optional]	2000
animationSpeed	How long this bar will be slided up and down	String | Integer [optional]	"normal"
jqObject	Own jquery object for notify bar	jQuery object [optional]	null
cls	You can set own CSS class for 'Notify bar'. There is too premade clasess "error" and "success" (独自のcssを設定したい場合は、ここで設定)	String
close	If set to true close button will be displayed (「×」ボタンを設定したい場合は、ここをtrueに)	Boolean	false

恐るべし、jQuery!!