code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jGrowlで位置(position)を切り替える

jGrowlというライブラリをご存じだろうか。Growl風の通知をJavaScriptで行うjQueryプラグインである。

Growlという元々はMac用に開発されたデスクトップの右上に出てくるちょっとしたメッセージの通知システムがある。Mac OS X以外にもWindows XP以降用Growl等あらゆる環境に移植されている。

アプリケーション(ThunderbirdとかApple MailとかSkypeとか)がGrowlの通知システムに対応していれば、例えばメール着信とかをお知らせしてくれるらしい。

『らしい』というのは、MacはiPhone開発以外では使わないし、Growlもインストールしていないので、実はあまりピンとはきていないのだが、とりあえずライブラリ名の由来はそこからのようである。

さて、このjGrowl。なぜか位置(position)がいったん決まると後から変更できない。ドキュメントにも書いてある。jGrowl Options:のpositionのところ。

This must be changed in the defaults before the startup method is called.

つまりjGrowlの最初の実行前にpositionを変更しておかないといけないということだ。こんな感じで書く。

$.jGrowl.defaults.position = 'bottom-right';

$.jGrowl('Hi there.');

で、後から位置を変えたい場合はどうするか?というのはドキュメント化されていない(全部を調べたわけじゃないけど、たぶん)。

前提はバージョンjGrowl 1.2.6。ソースを全て確認したわけではないのと、ドキュメント化されてないということは今後うまくいかなくなる可能性があることをご了承下さい。

やり方はふたつある。

と、その前にjGrowlは$.jGrowlで実行するとdiv#jGrowlというコンテナ要素を生成し、その中に各メッセージを追加する。そしてメッセージが消えてもコンテナ自体は消えない、という処理となっている。

jGrowlのコンテナが消えないため、異なる位置に変更したり、それぞれのメッセージを別のpositionに表示させることが困難となっている。

さて、一つ目の方法だが、その(#jGrowl)コンテナ自体の位置を変えてしまうやり方。ある時点から位置を変えた後に元に戻さなくてもいい場合とかに利用する。メッセージが出てるときに位置を変えたら、そのメッセージも併せて移動しちゃうのでご注意を。

$('div#jGrowl.jGrowl').removeClass('top-right').addClass('center');

とすればいい。これで右上(top-right)だったコンテナが中央(center)に移動するので、$.jGrowl('メッセージ');が中央に出るようになる。

面倒であればpositionで取り得る値を全て削除してから、行き先を指定しても良い。

$('div#jGrowl.jGrowl').removeClass('top-left bottom-right top-right bottom-left center').addClass('top-left');

二つ目は、新しいコンテナを作る方法だ。#jGrowl(デフォルトのコンテナ)はbodyタグの最後にコンテナを配置するので、近い場所に作成する。動的に作ってもいいし、静的に作ってもいいだろう。この方法もドキュメント化されていないので、今後仕様が変わるかもしれない。

例えば次のようなHTMLを用意する。

<body>
(略)

	<div id="jGrowl2" class="bottom-left"></div>
</body>

classで位置を予め指定しておくことが重要だ。これを忘れると表示されない。

で後は、$('#jGrowl2').jGrowl('Hi there.');とすれば、指定されたポジションに通知メッセージが表示されるだろう。

尚、centerの中央表示はデフォルトでは上部中央に表示されるようだ。

例えば次のようなスタイルシートで調整ができる。#jGrowl5はコンテナにつけてるidなので、標準では($.jGrowlで呼び出す場合は)削除する。

ちなみにiPhoneでは、position: fixedに対応していないため、うまく中央寄せになってないと思います。

body > div#jGrowl5.jGrowl.center {
	margin-top: -41px;
	top: 50%;
	width: 50%;
	left: 25%;
}

body > div#jGrowl5.jGrowl.center .jGrowl-notification {
	margin-left: auto;
	margin-right: auto;
}
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。