toastr是一款輕量級的消息提示插件，基于JQuery，使用簡單方便，外觀大氣漂亮。

點擊這里進入toastr在線調試使用? ?

點擊這里進入toastr官方網站

使用效果如下圖所示：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

---

插件使用需要引用的JS和CSS文件如下圖所示：

各版本JQuery：

jquery-3.3.1.min.js

toastr文件：?

toastr.min.js
toastr.min.css

---

使用說明：

插件有四種消息類型，分別如下圖所示：

toastr.info("您的手機已經欠費！", "系統提醒");//提醒toastr.success("恭喜獲得冠軍！", "恭喜");//成功toastr.warning("您已經嚴重超速！", "警告");//警告toastr.error("系統崩潰！", "錯誤");//錯誤

格式：

toastr.消息類型（"消息內容","消息標題，可以省略"）

實現代碼：

<script type="text/javascript">var toastr;toastr.options = {closeButton: true,//顯示關閉按鈕debug: false,progressBar: true,//顯示進度條positionClass: "toast-bottom-center",//位置onclick: null,//點擊消息框自定義事件showDuration: "300",//顯示動作時間hideDuration: "1000",//隱藏動作時間timeOut: "2000",//顯示時間,0為永久顯示extendedTimeOut: "1000",//鼠標移動過后顯示顯示時間showEasing: "swing",hideEasing: "linear",showMethod: "fadeIn",//顯示方式hideMethod: "fadeOut"//隱藏方式};$("#button1").click(function () {toastr.info("您的手機已經欠費！", "系統提醒");//提醒});$("#button2").click(function(){toastr.success("恭喜獲得冠軍！", "恭喜");//成功});$("#button3").click(function () {toastr.warning("您已經嚴重超速！", "警告");//警告});$("#button4").click(function () {toastr.error("系統崩潰！", "錯誤");//錯誤});$("#button6").click(function () {toastr.clear();//移除所有,有動畫效果})$("#button7").click(function () {toastr.remove();//移除所有，沒有動畫效果})</script>

?參數說明：

參數	說明
closeButton	顯示關閉按鈕
debug	開啟debug模式
progressBar	顯示進度條
onclick	鼠標點擊事件
showDuration	顯示動作時間
hideDuration	隱藏動作時間
timeOut	顯示時間,0為永久顯示
extendedTimeOut	鼠標移動過后顯示顯示時間
positionClass	出現位置，有一下幾種可以選擇： toast-top-left 頂端左邊 toast-top-right 頂端右邊 toast-top-center 頂端中間 toast-top-full-width 頂端，寬度鋪滿整個屏幕 toast-botton-right? toast-bottom-left toast-bottom-center toast-bottom-full-width

?

總結

以上是生活随笔為你收集整理的一款轻量级的消息提示插件 —— toastr的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。