jGrowlとjQueryUIを混在させる方法
Growl
OSX用の有名なデスクトップ通知アプリにGrowlというものがあります。 (現在ではApple製のデスクトップ通知システムが標準搭載されてしまいましたが。)
GrowlのデザインはGrowl -> スクリーンショットで見る事ができます。
jGrowl
ブラウザ上で「Growl風デザイン」の通知を実現するものとして、jGrowl / GitHub:stanlemon/jGrowlというjQueryのプラグインがあります。
使い方
使い方は非常に簡単でjQueryとjGrowlをロードして以下の様に呼び出すだけです。
$.jGrowl("ようこそ");
通知の表示や振る舞いに関する様々なオプションもあります。
表示
jGrowlとjQuery UIとの混在
現象
このjGrowlはたいへん便利ですがjQuery UIと混在させると表示がこんな風になります。(jQuery 1.9, jQuery UI 1.10, jGrowl v1.2.7時点)
解決法
Stack Overflowの以下のポストに理由や解決方法が載っています。
why jGrowl popup doesnt look as expected?
Webアプリ/サイトのCSSに以下を記述すると、
div.jGrowl > .ui-state-highlight { background: inherit; color: inherit; border: inherit; }
元に戻ります。