jGrowlの使用を開始するには、このjGrowlをダウンロードする必要があります。
開発者の公式サイトstanlemon.netからダウンロードできます。
このサイトでは、jGrowlの使用例を見ることができます。
LtbLinks.Ru
そこでは、広告を表示するために使用されます。
次に、htmlで規定します。
[script type="text/javascript" src="jquery-1.2.6.js"][/script]
[script type="text/javascript" src="jquery.jgrowl.js"][/script]
[link rel="stylesheet" href="growl.css" type="text/css" /]
それだけです！ 今、あなたはシュコダすることができます:)
簡単な例：
$(document).ready(function(){
$.jGrowl("Hello world!");
// Sample 2
$.jGrowl("Stick this!", { sticky: true });
// Sample 3
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
beforeClose: function(e,m) {
alert('About to close this notification!');
},
animateOpen: {
height: 'show'
}
});
});
コメントはありません！ :)次に、オプションを参照してください。
jGrowlオプション：
括弧内のデフォルト値
ヘッダー [空行]
このオプションは、メッセージヘッダーを設定します。
例：
$.jGrowl(' ', {Header: ' '} );
スティッキー [false]
trueに設定されている場合、通知はユーザーが閉じるまで画面に表示されます。 falseに設定すると、lifeパラメータを使用して設定された有効期間が切れると、メッセージはすぐに消えます。
接着剤 [後]
このオプションは、通知をjGrowlコンテナに挿入する方法を決定します。 afterが指定されている場合、通知はコンテナ内の通知の後に挿入されます。 前の場合は、コンテナ内の通知の前。
位置 [右上]
jGrowlコンテナに適用されるクラスを定義し、画面上のその位置を制御します。 デフォルトでは、いくつかのオプションが利用可能です-これらは、左上、右上、左下、右下、中央です。 このオプションは、通知の発信者が開始される前に設定する必要があります。
例：
画面の中央に通知を表示するには、次のように書く必要があります。
$.jGrowl.defaults.position = 'center';
テーマ [デフォルト]
表示される通知の外観を決定するCSSクラスを定義します。
例：
div.jGrowl div.red_theme {
background-color: #F00;
color: #FFF;
}
$.jGrowl('', { theme: 'red_theme'});
コーナー [10px]
jQueryプラグインがコーナーベンディングに使用されている場合、このオプションを使用して、通知のためにコーナーの丸みの半径を調整できます。
ここで使用するプラグイン： CORNERS
チェック [1000]
jGrowlが画面から削除されるメッセージをチェックする頻度を決定します。
例：
このオプションに最適なオプションは、通知の有効期間を最短にすることです。 この例では、3秒です。
$.jGrowl.defaults.check = 3000;
ライフ [3000]
画面上の通知の有効期間を定義します。 つまり、jGrowlがクリーニングされたと見なし、次のチェックで削除されるまでの時間です。
速度 [通常]
通知を開いたり閉じたりするときのアニメーション速度を決定します
イージング [スイング]
通知を開いたり閉じたりするときのアニメーションの実行方法を定義します。 デフォルトでは、jqueryライブラリのanimateメソッドに関しては、すべてのアニメーションメソッドが使用可能です。
近い [true]
画面に複数の通知が表示されたときにすべて閉じるボタンを表示するかどうかを決定します。true-表示され、false-表示されません。 コールバック関数をトリガーすることもできます。これは、すべて閉じるボタンをクリックしたときに機能します。
例：
$.jGrowl.defaults.closer=true;
closeTemplate [amp; times;]
オプションには、通知の閉じるボタンに使用される特殊文字が含まれています。 デフォルトでは、特殊文字amp; timesが使用されます。 乗算の符号に対応します。
例：
$.jGrowl("Hello world!", {closeTemplate: 'A'});
closeTemplate [[すべて閉じる]]
このコンテンツは、デフォルトでjGrowlコンテナの下部から追加される全閉リンクを作成するために使用され、コンテナ内のすべての通知を閉じるために使用されます。
例：
$ .jGrowl.closerTemplate = "すべての通知を閉じる";
ログ [関数（e、m、o）{}]
通知が表示されたときに他の前に起動するコールバック関数を定義します。 これにより、すべてのjGrowl通知の便利なロギングメカニズムがユーザーに提供されます。 この関数は、DOM要素としての通知、通知メッセージ、およびオプションの3つのパラメーターを受け入れます。
例：
div logs, .
:
$(e).attr('id') - id ,
(new Date()).getTime() - ,
m - ,
o.theme -
$.jGrowl.defaults.log = function(e,m,o) {
$('#logs').append(" " + $(e).attr('id') + " " + (new Date()).getTime() + " : " + m + " (" + o.theme + ")")
}
beforeOpen [関数（e、m、o）{}]
新しい通知が開く前に起動するコールバック関数を定義します。 この関数は、DOM要素としての通知、通知メッセージ、およびオプションの3つのパラメーターを受け入れます。
open [関数（e、m、o）{}]
新しい通知が開かれたときに起動するコールバック関数を定義します。 この関数は、DOM要素としての通知、通知メッセージ、およびオプションの3つのパラメーターを受け入れます。
beforeClose [関数（e、m、o）{}]
通知が閉じる前に起動するコールバック関数を定義します。 この関数は、DOM要素としての通知、通知メッセージ、およびオプションの3つのパラメーターを受け入れます。
閉じる [関数（e、m、o）{}]
新しい通知が開かれたときに起動するコールバック関数を定義します。 この関数は、DOM要素としての通知、通知メッセージ、およびオプションの3つのパラメーターを受け入れます。
例：
通知を閉じると、同じメッセージとともにアラートが表示されます
$.jGrowl.('Hellow World', close: function(e,m,o){
alert(m);
}
animateOpen [{opacity： 'show'}]
通知が開かれたときに使用されるアニメーションプロパティ（デフォルトは「マニフェスト」）。
animateClose [{opacity： 'hide'}]
通知を閉じるときに使用されるアニメーションプロパティ（デフォルトは「フェード」）。
テスト結果：
IE7-丸い角、透明度なし
FF2-すべては大丈夫
FF3-すべては大丈夫
Opera 9.27-角が丸くない、すべてのテキストが黒
Opera 9.63-角丸なし、すべてのテキストは黒
Operaで黒の問題をなんとか解決しました。
タグを使用して、ドキュメント自体に要素のテキスト色を厳密に登録する必要があります
[スタイルタイプ= "テキスト/ css"] p {色：白;} [/スタイル]
また、色は16進数ではなくテキストで記述する必要があります。