jQueryでGrowlウィンドウを実装する。

右上にぽこっと出てくるあれ。ちょっとした機能だけど実装するとかっこいい。

1, まずはココ←から「pnotify」をダウンロード

2, 以下の通り必要なファイルを読み込む。head内が無難かと。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pnotify.js"></script>
<link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
<link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" />
// ※公式と同様のスタイルにするためにはbootstrap.cssを読み込む必要があるので注意

3, Growlウィンドウを出したいタイミングで下記コードを呼び出す

$.pnotify({
    title: 'Success Title',
    text: 'Test Message',
    type: 'success'
});

デモ←クリック(右上に表示されます。)
※bootstrap.cssを読み込んでいないため、全く装飾されていないウィンドウが表示されます。

ほかにも色々な出し方があるので、詳しくは公式サイトを参照されたし。↓
http://sciactive.github.io/pnotify/