當遇到狀況,網頁要顯示訊息的形式有很多種,最無腦最粗暴的做法是 alert():

標題、位置、樣式沒得選,也談不上與網頁風格一致,但系統內建不必花腦筋,程式碼可中斷等使用者回應再繼續,用起來超簡單是它最大優點。

但如果你的網站要拿來換錢錢或分數,簡陋的 alert()/confirm() 很容易讓你被貼上不專業不用心的標籤。別擔心,網路上有許多美觀好用的現成程式庫可用,例如之前介紹過的 SweetAlert2

SweetAlert2 不依賴 jQuery,跟 jQuery、React、Angular、Vue.js 都能和平相處,擴充性及可客製化彈性都不錯,沒什麼好挑剔的。

但像 alert() 或 SweetAlert2 都具強制性,使用者必須關閉才能繼續,像作業成功、更新完成之類的訊息,性質更偏向通知,被忽略亦不致有嚴重後果,強迫使用者中斷動作確認接收,就像所的信件一律要寄掛號,說來也不合情理。

隨著手機介面發展,出現另一種較人性化的通知方式,術語叫做 Toast Notification,我採用微軟 UWP 文件的譯名,叫它「快顯通知」。

快顯通知有幾點特色:出現在畫面固定位置(例如:手機直式螢幕上下側、視窗右上角)、顯示常帶有動畫效果以吸引使用者注意、訊息會在數秒後會自動消失。如此,快顯通知既能達到通知效果,又不干擾使用者手上的操作,很適合通知性質的訊息。

不意外地,想在網頁加上快顯通知,最困難的不是研究原理寫程式,而是從琳琅滿目的選項挑一個合用順手的。爬文參考了一些評比整理:

總之,歷經一段掙扎,忍受「選擇困難症」發作的煎熬(喵的,比自己造輪子還痛苦),我最後選了 - NOTY

NOTY 原本是個 jQuery 套件,V3 版起不依賴其他 JavaScript 程式庫,只需一個 js 一個 css 搞定,甚至支援 IE10+,在 Github 上獲得超過 6700 顆星,算是主流選項,而簡便性與擴充性感覺也不錯。就決定是你了。

依自己常用情境,整理初步試用心得:

  1. NOTY 有 CDN,或者也可以 npm i noty@3.1.4 由 node_modules\noty\lib 取得
  2. 我的起手式:
    <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
         <link href="lib/noty/noty.css" rel="stylesheet" />
         <script src="lib/noty/noty.min.js"></script>
         <style>
             #noty_layout__topRight { width: 400px; }
         </style>
     </head>
    
     <body>
         <button onclick="test()">Show</button>
         <script>
             function test() {
                 new Noty({
                     //alert,success,warning,error,info
                     type: 'success',
                     text: '資料更新完成',
                     timeout: 3000,
                     closeWith: ['click','button']
                 }).show();
             }
         </script>
     </body></html>
    
    上述範例展示了 NOTY 基本應用,timeout 設定 3 秒自動關閉,closeWith 指定點擊訊息區塊或 X 鈕可關閉。設定 timout 時,訊息下方有倒數時間條,若文字多來不及讀完或想暫停做確認,滑鼠移到訊息上便會停止倒數,還蠻貼心的。
  3. API 未提供寬度參數,預設值偏窄,可透過 CSS #noty_layout__topRight 設定。
  4. NOTY 有內建六組主題,個人覺得偏樸素不夠精緻,但反正實際應用多半會依網站整體風格自訂 CSS,算不上問題。
  5. NOTY 也提供選擇鈕功能,要不要將確認對話框統一移進 NOTY 處理可自行衡量。但內建 API 未提供 Promise 串接確認、取消後續動作,要自己串一下,範例:
     <!DOCTYPE html>
     <html>
    
     <head>
         <meta charset="utf-8">
         <link href="lib/noty/noty.css" rel="stylesheet" />
         <script src="lib/noty/noty.min.js"></script>
         <style>
             #noty_layout__topRight {
                 width: 400px;
             }
         </style>
     </head>
    
     <body>
         <button onclick="testConfirm()">Confirm</button>
         <pre id="log"></pre>
         <script>
             function notyConfirm(text, yesText, noText) {
                 return new Promise((resolve, reject) => {
                     const n = new Noty({
                         text,
                         type: 'warning',
                         modal: true,
                         animation: {
                             open: null,
                             close: null
                         },
                         buttons: [
                             Noty.button(yesText || 'Yes', 'ok-css-name', function () {
                                 resolve();
                                 n.close();
                             }),
                             Noty.button(noText || 'No', 'cancel-css-name', () => {
                                 reject();
                                 n.close();
                             })
                         ]
                     });
                     n.show();
                 });
             }
             function testConfirm() {
                 let logger = document.getElementById('log');
                 notyConfirm('你確定要按下確定嗎?', '確定', '取消')
                 .then(() => logger.insertAdjacentText('beforeend','已按下確定\n'))
                 .catch(() => logger.insertAdjacentText('beforeend','已按下取消\n'));
             }
         </script>
     </body>
    
     </html>   
    

前端軍火庫再添機槍一挺。

Introduce to the no-dependency toast notification library - NOTY.


Comments

# by ms

不過這個套件一進去就看DEPRECATED This repository is no longer supported, please consider using alternatives.

# by demo

我慣用的是這套 https://codeseven.github.io/toastr/

# by Jeffrey

to ms, demo, 感謝。 選了半天,沒想到...(抱頭) 難怪我愛造輪子。來研究一下是否該換牌。

# by Pi

我Toast也是用Sweetalert2的,感覺簡潔舒服

Post a comment


43 + 19 =