HOME > >

jQuery noty

メッセージを通知するjQueryのプラグイン。デザインのカスタマイズも容易。

使い方

jQuery本体とnoty.js、CSSファイルが必要となるので読み込みます。

HTML

  1.  
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.noty.js"></script>
  4. <link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/>
  5.  

サンプル

ボタンをクリックするとページ上部にメッセージが表示されます。

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest :button').on('click', function() {
  3.         noty({text: 'noty - a jquery notification library!'});
  4.     });
  5. });

HTML

  1.  
  2. <div class="notytest">
  3.     <button>Alert</button>
  4. </div>
  5.  

オプション

オプションは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

  1. $(function() {
  2.     $('.notytest2 :button').on('click', function() {
  3.         noty({text  : 'Layout Test',
  4.               layout: $(this).text()
  5.         });
  6.     });
  7. });

HTML

  1.  
  2. <div class="notytest2">
  3.     <button>top</button>
  4.     <button>topCenter</button>
  5.     <button>bottom</button>
  6.     <button>center</button>
  7.     <button>topLeft</button>
  8.     <button>topRight</button>
  9. </div>
  10.  

type

通知の表示色。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest3 :button').on('click', function() {
  3.         noty({text  : 'type Test',
  4.               type  : $(this).text()
  5.         });
  6.     });
  7. });

HTML

  1.  
  2. <div class="notytest3">
  3.     <button>alert</button>
  4.     <button>error</button>
  5.     <button>success</button>
  6. </div>
  7.  

modal

trueの場合、noty以外が暗転し入力を受け付けなくなります。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest4 :button').on('click', function() {
  3.         noty({text  : 'modal Test',
  4.               modal : $(this).text() == 'true'
  5.         });
  6.     });
  7. });

HTML

  1.  
  2. <div class="notytest4">
  3.     <button>true</button>
  4.     <button>false</button>
  5. </div>
  6.  

modalCss

modalがtrueの場合の暗転部分のCSS設定。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest5 :button').on('click', function() {
  3.         noty({text    : 'modalCss Test',
  4.               modal   : true,
  5.               modalCss: {opacity: 0.7,
  6.                          background: '#2AA198',
  7.                          border: '10px solid #990000'
  8.                          }
  9.         });
  10.     });
  11. });

HTML

  1.  
  2. <div class="notytest5">
  3.     <button>modalCss</button>
  4. </div>
  5.  

speed

通知が表示される、閉じられる時のスピード。ミリ秒単位で指定。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest6 :button').on('click', function() {
  3.         noty({text    : 'speed Test',
  4.               speed   : parseInt($(this).text()),
  5.         });
  6.     });
  7. });

HTML

  1.  
  2. <div class="notytest6">
  3.     <button>1000</button>
  4.     <button>100</button>
  5. </div>
  6.  

timeout

通知が表示されている時間。設定されている時間を過ぎると自動で閉じられます。falseを指定した場合、自動で閉じられることはありません。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest7 :button').on('click', function() {
  3.         noty({text    : 'timeout Test',
  4.               timeout : $(this).text() == 'false' ? false : parseInt($(this).text())
  5.         });
  6.     });
  7. });

HTML

  1.  
  2. <div class="notytest7">
  3.     <button>100</button>
  4.     <button>1000</button>
  5.     <button>false</button>
  6. </div>
  7.  

onShow/onClose

通知が表示された時、閉じられた時に実行されるコールバック関数を設定します。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest8 :button').on('click', function() {
  3.         noty({text    : 'onShow/onClose Test',
  4.               timeout : false,
  5.               modal   : true,
  6.               onShow  : function() { alert('閉じるには通知部分をクリックしてください。'); },
  7.               onClose : function() { alert('閉じました。'); }
  8.         });
  9.     });
  10. });

HTML

  1.  
  2. <div class="notytest8">
  3.     <button>実行</button>
  4. </div>
  5.  

closeOnSelfClick

この値がtrueの場合、通知エリア全体が閉じるボタン化します。falseの場合、メッセージ部分をクリックしても何も起こらず、閉じるボタンのみ(×ボタン)が閉じることになります。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest9 :button').on('click', function() {
  3.         noty({text    : 'closeOnSelfClick Test',
  4.               timeout : false,
  5.               modal   : true,
  6.               closeOnSelfClick : $(this).text() == 'true'
  7.         });
  8.     });
  9. });

HTML

  1.  
  2. <div class="notytest9">
  3.     <button>true</button>
  4.     <button>false</button>
  5. </div>
  6.  

buttons

ボタンを追加できます。デフォルトで表示される閉じるボタン(×)を非表示にするにはclosableをfalseに設定します。

buttonsで追加したボタンをクリックすると、基本的に通知は消えるようです。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest10 :button').on('click', function() {
  3.         noty({text    : 'Buttons Test',
  4.               timeout : false,
  5.               closable: false,
  6.               type: 'alert',
  7.               layout: 'center',
  8.               closeOnSelfClick: false,
  9.               buttons : [
  10.                         {type: 'button',  text: 'OK',     click: function() { return false; } },
  11.                         {type: 'button',  text: 'NG',     click: function() { /**/ } },
  12.                         {type: 'button',  text: '閉じる', click: function() { $.noty.close(); } }
  13.                         ]
  14.         });
  15.     });
  16. });

HTML

  1.  
  2. <div class="notytest10">
  3.     <button>exec</button>
  4. </div>
  5.  

animateOpen/animateClose

通知を表示/閉じる際のアニメーションの設定です。 利用できるのは.animate() – jQuery APIのCSSと同様のようですがちょっと不明な点あり。

サンプル

実行結果

Javascript

  1. $(function() {
  2.     $('.notytest11 :button').on('click', function() {
  3.         noty({text    : 'animateOpen/animateClose Test',
  4.               timeout : false,
  5.               type: 'alert',
  6.               layout: 'center',
  7.               animateOpen : {height: 300, width: 'toggle'},
  8.               animateClose: {height: 'toggle', width: 'toggle'},
  9.         });
  10.     });
  11. });

HTML

  1.  
  2. <div class="notytest11">
  3.     <button>exec</button>
  4. </div>
  5.