Noty.js · phper

**NOTY**是一個無依賴項的通知庫，可以輕松創建警報，成功，錯誤，警告，信息和確認消息，以替代標準警報對話框。 ## 安裝腳本從[https://github.com/needim/noty](https://github.com/needim/noty)下載最新源碼,然后引入相應腳本文件: ~~~  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  <script type="text/javascript" src="js/noty/jquery.noty.js"></script>  <script type="text/javascript" src="js/noty/layouts/center.js"></script>  <script type="text/javascript" src="js/noty/themes/default.js"></script> ~~~ ## 使用方法一般情況下，直接使用noty(options)全局函數來創建提示信息即可: ~~~ noty({text: "noty - jQuery 通知", layout: "center", timeout: 3000}); ~~~ 以上代碼將創建一個在屏幕中間顯示的提示信息,并在3秒后自動關閉。注意:如果沒有對應布局的js文件將不會被正常呈現。 ## 布局樣式支持的提示樣式，每種樣式都有預定義好的css樣式： * alert: 默認的提示樣式 * success: 成功 * error: 錯誤 * warning: 警告 * information: 信息支持的布局位置： [一般的消息提示使用**topCenter**或**center**] * top: 頂部,長條狀 * topLeft/**topCenter**/topRight: 頂部的左/中/右位置, 短條狀 * **center**/centerLeft/centerRight: 正中/中左/中右, 短條狀 * bottomLeft/bottomCenter/bottomRight: 底部左/中/右位置, 短條狀 * bottom: 底部,長條狀除上以上布局方式之外,還有一種用于自定義布局的inline方式,需要引入layouts/inline.js**** ## 默認選項 noty有以下可供設置的選項: ~~~ $.noty.defaults = { layout: 'top', // 默認布局 theme: 'defaultTheme', // 默認主題 type: 'alert', // 默認類型 text: '', //默認文本 dismissQueue: true, // 是否添加到隊列 template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>', // 消息默認模板 animation: { //默認的顯示及關閉動畫 open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 // opening & closing animation speed }, timeout: false, // 自動關閉時間,默認不會自動關閉 force: false, // 添加到隊列開始處 modal: false, // 遮罩 maxVisible: 5, // 一個隊列的消息最大可見數量, 即一個隊列中同一時間最多顯示的數量 closeWith: ['click'], // ['click', 'button', 'hover'] 關閉的事件,默認點擊消息關閉 callback: { // 回調函數 onShow: function() {}, // 顯示之前 afterShow: function() {}, // 顯示之后 onClose: function() {}, // 關閉之前 afterClose: function() {} // 關閉之后 }, buttons: false // 按鈕,用于在彈出的消息框中顯示按鈕 }; ~~~ ## 自定義容器通過noty(options)函數創建的提示信息默認被添加到body上, noty支持在自定義容器中顯示提示的方式: ~~~ $('.custom_container').noty({text: "noty - jQuery 通知插件"}); ~~~ ## 按鈕及確認對話框可以像這樣設置提示信息上的按鈕： ~~~ noty({ text: '你要繼續嗎?', buttons: [{addClass: 'btn btn-primary', text: '確定', onClick: function($noty) { // this = button element 也就是當前的按鈕 // $noty = $noty element 也就是當前這個提示信息對象 $noty.close(); noty({text: '你點擊了確定按鈕', type: 'success'}); }}, {addClass: 'btn btn-danger', text: '取消', onClick: function($noty){ $noty.close(); noty({ text: '你點擊了取消按鈕', type: 'error'}); }} ]} ); ~~~ ## 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提示信息的類型一般情況下通過實例變量來訪問它的屬性/方法: ``` var n \= noty({text: "noty - jQuery 通知插件"}); n.setText("這里是更新內容"); // 更新內容 n.setTimeout(1000); // 設置超時時間[秒] n.setType("error"); // 更新提示類型 n.close(); // 此外, noty還有幾個屬性用于查看它的狀態 n.closed // 是否已關閉 n.showing // 是否正在顯示 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 取消替代