5

當遇到狀況，網頁要顯示訊息的形式有很多種，最無腦最粗暴的做法是 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的，感覺簡潔舒服

# by ishowlife

https://tw.ishowlife.com/home.php

Post a comment