jGrowl - revamping

jGrowlは、Mac OS XのGrowlをモチーフとしたメッセージを表示してくれるjQueryのプラグインです。
jQuery自体のバージョンは、1.3以上が推奨されてます。

今回はrailsのflash内のメッセージをjGrowlで表示させてみます。

1. ファイルを配置します。

$RAILS_ROOT/public/javascripts/jquery.jgrowl.js
$RAILS_ROOT/public/stylesheets/jquery.jgrowl.css
$RAILS_ROOT/public/stylesheets/jgrowl_custom.css(サンプルから一部切り出したテーマの設定)
$RAILS_ROOT/public/images/iphone.png(サンプルにあったiphoneライクなメッセージボードの画像)

2. railsのflashの内容が表示されるよう、.html.erb内にJavaScriptを記述します。

<script type="text/javascript">
$.jGrowl.defaults.position = 'center';
<% if flash[:notice] %>
$.jGrowl('<%= flash[:notice] %>', { header: 'notification', theme: 'iphone', life: 1000 });
<% end %>
</script>

'life'で表示期間(ミリ秒)を指定します。ユーザが閉じるまで表示させたままにすることも可能です。

メッセージボードの画像とテーマ(iphone)は、jGrowlに付属しているサンプルをそのままjgrowl_custom.cssとして切り出して使っています。また、メッセージボードの表示位置について、デフォルトだとあまり選択肢がない(top-left, top-right, bottom-left, bottom-right, centerの計5種類)ので、同ファイル内で'center'の設定を上書き、表示位置を調整しました。

body > div.jGrowl.center {
        top:                            250px;
        left:                           250px;
        width:                          0%;
}

あとはflash[:notice]にメッセージを入れると、以下のように表示されます。

jGrowl