メッセージを通知するjQueryのプラグイン。デザインのカスタマイズも容易。
使い方
jQuery本体とnoty.js、CSSファイルが必要となるので読み込みます。
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.noty.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/>
サンプル
ボタンをクリックするとページ上部にメッセージが表示されます。
Javascript
$(function() {
$('.notytest :button').on('click', function() {
noty({text: 'noty - a jquery notification library!'});
});
});
HTML
<div class="notytest">
<button>Alert</button>
</div>
オプション
オプションはnoty()にオブジェクトとして渡します。
Name |
Type |
Default |
Description |
text |
string |
'' |
通知メッセージ |
textAlign |
CSS/Properties/text-align
|
center |
通知内のテキストの位置 |
layout |
top, topCenter, bottom, center, topLeft, topRight |
top |
通知が表示される場所(Customizable with CSS) |
theme |
string |
default |
Theme of notification. (Customizable with CSS) |
type |
alert | error | success |
alert |
通知のタイプ。色が変わる。(Customizable with CSS) |
modal |
boolean |
false |
trueの場合、noty以外が暗転し入力を受け付けなくなります。
|
modalCss |
jQuery Css
Properties |
{ 'opacity': 0.6} |
modalがtrueの場合の透明度。 |
speed |
integer (ms) |
500 |
通知の表示、閉じる時のスピード |
timeout |
integer (ms) | false |
5000 |
通知が非表示になるまでの時間。false指定の場合は、ユーザーが閉じるボタンを押すまで閉じません。 |
animateOpen |
jQuery Animate Properties |
{ height: 'toggle'} |
表示の際のアニメーション設定。 |
animateClose |
jQuery Animate
Properties |
{ height: 'toggle'} |
閉じる際のアニメーション設定 |
easing |
jQuery
Easing Functions |
swing |
More easing functions are available with the use of
plugins like jQuery UI.
|
closable |
boolean |
true |
閉じるボタン(×)を表示するかどうか。 |
closeOnSelfClick |
boolean |
true |
通知エリア全体を閉じるボタン化します。 |
force |
boolean |
false |
Adds notification to the beginning of queue when set to
true. |
buttons |
false | array |
false |
通知エリアにボタンを追加できます。サンプル
|
onShow |
false | function |
false |
通知が表示されたときに実行されるコールバック関数を設定します。 |
onClose |
false | function |
false |
通知が閉じられた時に実行されるコールバック関数を設定します。 |
layout
通知が表示される場所
サンプル
実行結果
Javascript
$(function() {
$('.notytest2 :button').on('click', function() {
noty({text : 'Layout Test',
layout: $(this).text()
});
});
});
HTML
<div class="notytest2">
<button>top</button>
<button>topCenter</button>
<button>bottom</button>
<button>center</button>
<button>topLeft</button>
<button>topRight</button>
</div>
type
通知の表示色。
サンプル
Javascript
$(function() {
$('.notytest3 :button').on('click', function() {
noty({text : 'type Test',
type : $(this).text()
});
});
});
HTML
<div class="notytest3">
<button>alert</button>
<button>error</button>
<button>success</button>
</div>
modal
trueの場合、noty以外が暗転し入力を受け付けなくなります。
サンプル
Javascript
$(function() {
$('.notytest4 :button').on('click', function() {
noty({text : 'modal Test',
modal : $(this).text() == 'true'
});
});
});
HTML
<div class="notytest4">
<button>true</button>
<button>false</button>
</div>
modalCss
modalがtrueの場合の暗転部分のCSS設定。
サンプル
Javascript
$(function() {
$('.notytest5 :button').on('click', function() {
noty({text : 'modalCss Test',
modal : true,
modalCss: {opacity: 0.7,
background: '#2AA198',
border: '10px solid #990000'
}
});
});
});
HTML
<div class="notytest5">
<button>modalCss</button>
</div>
speed
通知が表示される、閉じられる時のスピード。ミリ秒単位で指定。
サンプル
Javascript
$(function() {
$('.notytest6 :button').on('click', function() {
noty({text : 'speed Test',
speed : parseInt($(this).text()),
});
});
});
HTML
<div class="notytest6">
<button>1000</button>
<button>100</button>
</div>
timeout
通知が表示されている時間。設定されている時間を過ぎると自動で閉じられます。falseを指定した場合、自動で閉じられることはありません。
サンプル
Javascript
$(function() {
$('.notytest7 :button').on('click', function() {
noty({text : 'timeout Test',
timeout : $(this).text() == 'false' ? false : parseInt($(this).text())
});
});
});
HTML
<div class="notytest7">
<button>100</button>
<button>1000</button>
<button>false</button>
</div>
onShow/onClose
通知が表示された時、閉じられた時に実行されるコールバック関数を設定します。
サンプル
Javascript
$(function() {
$('.notytest8 :button').on('click', function() {
noty({text : 'onShow/onClose Test',
timeout : false,
modal : true,
onShow : function() { alert('閉じるには通知部分をクリックしてください。'); },
onClose : function() { alert('閉じました。'); }
});
});
});
HTML
<div class="notytest8">
<button>実行</button>
</div>
closeOnSelfClick
この値がtrueの場合、通知エリア全体が閉じるボタン化します。falseの場合、メッセージ部分をクリックしても何も起こらず、閉じるボタンのみ(×ボタン)が閉じることになります。
サンプル
Javascript
$(function() {
$('.notytest9 :button').on('click', function() {
noty({text : 'closeOnSelfClick Test',
timeout : false,
modal : true,
closeOnSelfClick : $(this).text() == 'true'
});
});
});
HTML
<div class="notytest9">
<button>true</button>
<button>false</button>
</div>
ボタンを追加できます。デフォルトで表示される閉じるボタン(×)を非表示にするにはclosableをfalseに設定します。
buttonsで追加したボタンをクリックすると、基本的に通知は消えるようです。
サンプル
Javascript
$(function() {
$('.notytest10 :button').on('click', function() {
noty({text : 'Buttons Test',
timeout : false,
closable: false,
type: 'alert',
layout: 'center',
closeOnSelfClick: false,
buttons : [
{type: 'button', text: 'OK', click: function() { return false; } },
{type: 'button', text: 'NG', click: function() { /**/ } },
{type: 'button', text: '閉じる', click: function() { $.noty.close(); } }
]
});
});
});
HTML
<div class="notytest10">
<button>exec</button>
</div>
animateOpen/animateClose
通知を表示/閉じる際のアニメーションの設定です。
利用できるのは.animate() – jQuery APIのCSSと同様のようですがちょっと不明な点あり。
サンプル
Javascript
$(function() {
$('.notytest11 :button').on('click', function() {
noty({text : 'animateOpen/animateClose Test',
timeout : false,
type: 'alert',
layout: 'center',
animateOpen : {height: 300, width: 'toggle'},
animateClose: {height: 'toggle', width: 'toggle'},
});
});
});
HTML
<div class="notytest11">
<button>exec</button>
</div>