一個超棒的訊息提示jQuery外掛程式 - Noty

日期：2012-8-20  來源：GBin1.com

線上示範  本地下載
前面我們介紹過一款基於jQuery，backbone.js和underscore.js的訊息提示架構，今天我們介紹另外一款jQuery的訊息提示外掛程式 - Noty。使用它能夠協助我們快速建立，警告，提示和錯誤資訊框。大家肯定都使用過預設的alert('..')代碼吧，使用Nody能夠建立出漂亮功能更強大的訊息提示，希望大家喜歡！
主要特性
內建了alert，warning和error，success，information和confirm對話方塊
支援主題開發
完全可定製
允許動畫定製
支援不同的callback方法(onShow，afterShow，onClose，afterClose)等
如何使用
使用非常簡答，你匯入對應類庫，如下：
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
  <!-- noty -->
  <script type="text/javascript" src="js/jquery.noty.js"></script>
 
  <!-- layouts -->
  <script type="text/javascript" src="js/layouts/bottom.js"></script>
  <script type="text/javascript" src="js/layouts/bottomCenter.js"></script>
  <script type="text/javascript" src="js/layouts/bottomLeft.js"></script>
  <script type="text/javascript" src="js/layouts/bottomRight.js"></script>
  <script type="text/javascript" src="js/layouts/center.js"></script>
  <script type="text/javascript" src="js/layouts/centerLeft.js"></script>
  <script type="text/javascript" src="js/layouts/centerRight.js"></script>
  <script type="text/javascript" src="js/layouts/inline.js"></script>
  <script type="text/javascript" src="js/layouts/top.js"></script>
  <script type="text/javascript" src="js/layouts/topCenter.js"></script>
  <script type="text/javascript" src="js/layouts/topLeft.js"></script>
  <script type="text/javascript" src="js/layouts/topRight.js"></script>

  <!-- themes -->
  <script type="text/javascript" src="js/themes/default.js"></script>
注意以上包含了，noty類庫，布局代碼和主題代碼，你可以根據自己的不同需求來引用。有效縮小了js代碼大小。
調用noty非常簡單，直接使用如下代碼即可：
    var n = noty({
      text: 'Do you want to continue?',
      type: 'alert',
      dismissQueue: true,
      layout: 'center',
      theme: 'default',
      buttons: [
        {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
            $noty.close();
            noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
          }
        },
        {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
            $noty.close();
            noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
          }
        }
      ]
    });
以上我們建立了一個確認框代碼，當頁面載入後，自動產生一個確認框。位置在頁面中間，這裡通過layout選項控制。
來源：一個超棒的訊息提示jQuery外掛程式 - Noty