Toastmessage() 的使用

原文：https://blog.csdn.net/u013709087/article/details/53142857 

一：jquery.toastmessage.js 概述
toastmessage.js 是jQuery插件提供的消息通知提示框。有着較好的用戶體驗，它有四種不同的消息類型：notice(通知) success(成功) warning(警告)error(錯誤)。 
具體說明參考官方文檔：https://github.com/akquinet/jquery-toastmessage-plugin/wiki

二：具體使用
第一步：搭建環境，引入需要的文件

在web動態項目中首先要載入jQuery的js文件(此插件需要jQuery的支持);
引入jquery.toastmessage.js (源碼文件);
引入jquery.toastmessage.css (需要的樣式文件);
自定義自己項目中需要的js（如：textMessage.js）文件. 

第二步：調用相應的方法 
在textMessage.js中定義消息類型以及提示消息內容：

// 成功消息
function showSuccessToast(){
    $().toastmessage('showSuccessToast', 'This is Sussess Toast');
}

以上是以Success爲例說明：
    showSuccessToast() 爲事件觸發的方法名；
    showSuccessToast 爲調用jquery.toastmessage.js 中 成功消息的方法；
    This is Sussess Toast 爲提示消息的內容。
    其他notice，warning, error使用方法一致。

測試效果： 
 
當然，除了使用默認效果的之外，還可以對方法的屬性進行自定義，還是以success爲例：

//自定義成功消息
function showStickySuccessToast(){
    myToast = $().toastmessage('showToast', {
        stayTime: 3000,
        text: 'Success Dialog which is sticky',
        sticky: true,
        position: 'middle-right',
        type: 'success',
        closeText: '',
        close: function(){
            console.log("toast is closed...");
        }
    });
}

自定義可以對顯示的位置，停留的時間，提示內容，類型，關閉按鈕，關閉後的回調函數等設置。 
最後還有一個移除方法：

//移除消息
function removeToast(){
    $().toastmessage('removeToast', myToast);
}

移除方法可以對名爲 “myToast” 的方法進行從頁面中移除操作。