noty – jQuery通知插件

noty是一個jQuery的通知(信息提示)插件，靈活輕便，是一個很是棒的用於替代傳統提示對話框的插件。

當前最新版本爲2.1.0: 從 https://github.com/needim/noty 能夠獲取最新源代碼。

 

佈局樣式

支持的提示樣式，每種樣式都有預約義好的css樣式：

• alert: 默認的提示樣式
• success: 成功
• error: 錯誤
• warning: 警告
• information: 信息

支持的佈局位置：

• top: 頂部,長條狀
• topLeft/topCenter/topRight: 頂部的左/中/右位置, 短條狀
• center/centerLeft/centerRight: 正中/中左/中右, 短條狀
• bottomLeft/bottomCenter/bottomRight: 底部左/中/右位置, 短條狀
• bottom: 底部,長條狀

除上以上佈局方式以外,還有一種用於自定義佈局的inline方式,須要引入layouts/inline.js

 

安裝腳本

從https://github.com/needim/noty 下載最新源碼,而後引入相應腳本文件:

1 <!--jQuery文件-->
2 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3 <!--noty主文件-->
4 <script type="text/javascript" src="js/noty/jquery.noty.js"></script>
5 <!--noty提示信息位置的文件, 須要哪些位置就引入對應的腳本,這裏爲center,能夠添加多個佈局文件-->
6 <script type="text/javascript" src="js/noty/layouts/center.js"></script>
7 <!--noty主題樣式文件,-->
8 <script type="text/javascript" src="js/noty/themes/default.js"></script>

 

若是你使用的是jQuery 1.6如下版本, 那麼還須要引入promise.js文件。

 

使用方法

通常狀況下，直接使用noty(options)全局函數來建立提示信息便可:

1 noty({text: "noty - jQuery 通知插件 - 紅塵書生 -http://www.cnblogs.com/jesu/", layout: "center", timeout: 5000})

以上代碼將建立一個在屏幕中間顯示的提示信息,並在5秒後自動關閉。

注意:若是沒有對應佈局的js文件將不會被正常呈現。

 

默認選項

noty有如下可供設置的選項:

 1 $.noty.defaults = {
 2     layout: 'top',  // 默認佈局
 3     theme: 'defaultTheme', // 默認主題
 4     type: 'alert', // 默認類型
 5     text: '', //默認文本
 6     dismissQueue: true, // 是否添加到隊列
 7     template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',  // 消息默認模板
 8     animation: { //默認的顯示及關閉動畫
 9         open: {height: 'toggle'},
10         close: {height: 'toggle'},
11         easing: 'swing',
12         speed: 500 // opening & closing animation speed
13     },
14     timeout: false, // 自動關閉時間,默認不會自動關閉
15     force: false, // 添加到隊列開始處
16     modal: false, // 遮罩
17     maxVisible: 5, // 一個隊列的消息最大可見數量, 即一個隊列中同一時間最多顯示的數量
18     closeWith: ['click'], // ['click', 'button', 'hover'] 關閉的事件,默認點擊消息關閉
19     callback: { // 回調函數
20         onShow: function() {}, // 顯示以前
21         afterShow: function() {}, // 顯示以後
22         onClose: function() {}, // 關閉以前
23         afterClose: function() {} // 關閉以後
24     },
25     buttons: false // 按鈕,用於在彈出的消息框中顯示按鈕
26 };

 

 

自定義容器

經過noty(options)函數建立的提示信息默認被添加到body上, noty支持在自定義容器中顯示提示的方式:

1 $('.custom_container').noty({text: "noty - jQuery 通知插件 - 紅塵書生- http://www.cnblogs.com/jesu/"});

 

 

按鈕及確認對話框

能夠像這樣設置提示信息上的按鈕：

 1 noty({
 2   text: '你要繼續嗎?',
 3   buttons: [
 4     {addClass: 'btn btn-primary', text: '肯定', onClick: function($noty) {
 5         // this = button element 也就是當前的按鈕
 6         // $noty = $noty element 也就是當前這個提示信息對象
 7         $noty.close();
 8         noty({text: '你點擊了肯定按鈕', type: 'success'});
 9       }
10     },
11     {addClass: 'btn btn-danger', text: '取消', onClick: function($noty) {
12         $noty.close();
13         noty({text: '你點擊了取消按鈕', type: 'error'});
14       }
15     }
16   ]
17 });

 

官方DEMO中的確認提示對話框也是這麼建立的。

 

API

主要有如下api可用：

• $.noty.get(id): 經過id獲取noty對象, 通常用不到
• $.noty.close(id): 關閉一個noty提示
• $.noty.clearQueue(): 清空隊列中的noty
• $.noty.closeAll(): 關閉全部noty提示
• $.noty.setText(id, text): 更新noty提示信息的文本內容
• $.noty.setType(id, type): 更新noty提示信息的類型

通常狀況下經過實例變量來訪問它的屬性/方法:

1 var n = noty({text: "noty - jQuery 通知插件 - 紅塵書生 - http://www.cnblogs.com/jesu/"});
2 n.setText("囧月 - lwme.cnblogs.com"); // 更新內容
3 n.setTimeout(10000); // 設置超時時間
4 n.setType("error"); // 更新提示類型
5 n.close();
6 // 此外, noty還有幾個屬性用於查看它的狀態
7 n.closed // 是否已關閉
8 n.showing // 是否正在顯示
9 n.shown // 是否已顯示

 

而$.noty空間最經常使用的就是clearQueue()和closeAll()方法了，其餘幾個方法通常不被使用，主要是由於noty的id是隨機生成的。

除了文檔裏公開的，noty還有一些沒在文檔裏公開的屬性：

• $.noty.queue 消息隊列, Array
• $.noty.layouts 能夠獲取當前加載的佈局, Object
• $.noty.themes 獲取可用的主題, Object
• $.noty.store 獲取當前顯示在頁面中的noty對象,而後能夠經過api進行操做, Array
• $.noty.returns 獲取noty(options)函數返回的值, 默認爲object返回noty對象,能夠改爲其餘值返回noty對象的id

此外,noty還提供了方法用來替代window.alert函數:

• $.noty.consumeAlert 替代window.alert
• $.noty.stopConsumeAlert 取消替代

 

noty總體設置比較簡單，沒有過多的參數設置，使用起來也很方便，特別是默認不用按鈕來讓用戶點肯定這點特別值得稱讚，體驗至關不錯。

更多的例子請看官方：http://needim.github.io/noty/

END>>>