Toastr:最佳的通知提示 jQuery 插件

2019/07/01 48 網站技術 , JavaScript , jQuery

我標題直接下「最佳的」,原因是這是我在網路上找到最容易使用且最不會受到干擾的通知提示 jQuery 插件!Toastr 使用起來非常簡單,拿來當作後端訊息提示非常好用,最近做自己網站的後台就是運用這個 jQuery 插件來做通知,不管是位置(左上、上方、右上、右下、下方和左下等)、模式(成功、資訊、警告和錯誤)、關閉按鈕、行為按鈕、偵錯、防止重複和最新的置頂等,該有的功能都有,我想應該沒有比它更強大的通知提示 jQuery 插件了!

📝 插件名稱:Toastr
⚙ 插件需求:jQuery
🌐 官方網站:https://codeseven.github.io/toastr/
🔗 GitHub:https://github.com/CodeSeven/toastr
🖥 DEMO:https://codeseven.github.io/toastr/demo.html

現在我們要在最短的時間將這個通知呼叫出來,立刻進入我們的快速開始單元!

快速開始

<head>~</head>

先將 jQuery 引入網頁:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

再來將 Toastr 的 CSS 與 JS 的 CDN 引入網頁:

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

再將 Toastr 的 JavaScript 預設值載入:

<script>
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
</script>

※ 這邊可以從 DEMO 頁取得,上方選項設定好後生成,下方都會給原始碼。

<body>~</body>

製作四個按鈕分別可生成成功、資訊、警告和錯誤通知:

<button onclick="toastr['success']('成功啦!', '成功');">成功</button><br>
<button onclick="toastr['info']('資訊來囉!', '資訊');">資訊</button><br>
<button onclick="toastr['warning']('被警告了!', '警告');">警告</button><br>
<button onclick="toastr['error']('有什麼錯誤了!', '錯誤');">錯誤</button><br>

這樣就成功啟用 Toastr 通知囉!還有更多進階的使用方式就等你去發覺了!😉


▲ Toastr 官方網站截圖。

▲ Toastr DEMO 提供多個選項可以生成提示,生成後可見提示的預覽,下方還能複製原始碼。

▲ 我的範例原始碼與實際執行測試截圖。

▲ 我的範例,放在 CodePen 提供大家參考囉!

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB