jQuery Growl プラグイン(メッセージ通知)
jQuery Growl プラグイン(メッセージ通知)を使用すると、オーバーレイにフィードバックメッセージを簡単に表示できます。メッセージは一定時間後に自動的に消え、「OK」ボタンなどをクリックする必要はありません。ユーザーはマウスを動かすか、閉じるボタンをクリックして、情報をより速く非表示にすることもできます。
このプラグインの現在のバージョンは1.0.0です。
アクセスjQuery Growl公式サイト、ダウンロードjQuery Growlプラグイン。
効果は次のとおりです：
使用方法
プラグインをダウンロードしたら、jQuery ライブラリ、jquery.growl.js、jquery.growl.css の3つのファイルをインポートします。例：
<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="/static.jyshare.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="/static.jyshare.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
Growl プラグインを使用するには、設定する表示テキスト要素を選択し、テキストをパラメータとしてプラグインに渡します：
$.growl({ title: "メッセージタイトル", message: "メッセージ内容！" });
$.growl.error({ title: "エラータイトル", message: "エラーメッセージ内容！" });
$.growl.notice({title: "通知タイトル", message: "通知メッセージ内容！" });
$.growl.warning({title: "警告タイトル", message: "警告メッセージ内容！" });
いくつかの利用可能なデフォルトオプションがあります。興味があれば、以下の完全なサンプルデモを確認できます。
サンプルデモ
jQuery Message プラグインのデモ。
$(function() {
$.growl({
title: "メッセージタイトル",
message: "メッセージ内容！"
});
$('.error').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.error({
title: "エラータイトル",
message: "エラーメッセージ内容！"
});
});
$('.notice').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.notice({
title: "通知タイトル",
message: "通知メッセージ内容！"
});
});
return $('.warning').click(function(event) {
event.preventDefault();
event.stopPropagation();
return $.growl.warning({
title: "警告タイトル",
message: "警告メッセージ内容！"
});
});
});
試してみる »