iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 51

[十分鐘學習] toastr - 簡易提示訊息

example1

toastr是一套提示訊息JavaScript函式庫,必須載入jQuery,宗旨是利用簡單的程式碼函式庫來做客製化跟擴充。toastr提供一個範例頁面toastr examples,方便自訂效果跟產生原始碼,類似Customize and download · Bootstrap的效果,方便使用者加快流程,先前介紹的ALERTIFY JS整體層面來是比toastr好很多,無論是原生JavaScript以及整體檔案大小和功能延展性,但toastr簡單使用的操作模式,如果有舊專案是在jQuery的環境下,要做一些客製功能,或許就是不錯的選擇。

GitHub Star: 7,700
Javascripting Overall: 83%
瀏覽器: ChromeFirefoxIE7+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- toastr v2.1.4 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet"  />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
    
  • npm

      $ npm install --save toastr
    
  • Bower

      $ bower install toastr
    
  • NuGet Gallery

      $ Install-Package toastr
    

《範例》

  • 右下角顯示提示訊息

      <script>
      	toastr.options = {
      		// 參數設定[註1]
      		"closeButton": false, // 顯示關閉按鈕
      		"debug": false, // 除錯
      		"newestOnTop": false,  // 最新一筆顯示在最上面
      		"progressBar": true, // 顯示隱藏時間進度條
      		"positionClass": "toast-bottom-left", // 位置的類別
      		"preventDuplicates": false, // 隱藏重覆訊息
      		"onclick": null, // 當點選提示訊息時,則執行此函式
      		"showDuration": "300", // 顯示時間(單位: 毫秒)
      		"hideDuration": "1000", // 隱藏時間(單位: 毫秒)
      		"timeOut": "5000", // 當超過此設定時間時,則隱藏提示訊息(單位: 毫秒)
      		"extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時,離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
      		"showEasing": "swing", // 顯示動畫時間曲線
      		"hideEasing": "linear", // 隱藏動畫時間曲線
      		"showMethod": "fadeIn", // 顯示動畫效果
      		"hideMethod": "fadeOut" // 隱藏動畫效果
      	}
      	toastr.success( "Success" );
      	toastr.warning( "Warning" );
      	toastr.error( "Error" );
      </script>
    

    [註1]

    參數 描述
    closeButton 顯示關閉按鈕
    debug 除錯
    newestOnTop 最新一筆顯示在最上面
    progressBar 顯示隱藏時間進度條
    positionClass 位置的類別
    preventDuplicates 隱藏重覆訊息
    onclick 當點選提示訊息時,則執行此函式
    showDuration 顯示時間(單位: 毫秒)
    hideDuration 隱藏時間(單位: 毫秒)
    timeOut 當超過此設定時間時,則隱藏提示訊息(單位: 毫秒)
    extendedTimeOut 當使用者觸碰到提示訊息時,離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
    showEasing 顯示動畫時間曲線
    hideEasing 隱藏動畫時間曲線
    showMethod 顯示動畫效果
    hideMethod 隱藏動畫效果

    函式列表

    函式 描述
    success() 標準風格的提示訊息
    warning() 警告風格的提示訊息
    error() 錯誤風格的提示訊息
    remove() 移除全部提示訊息
    clear() 淡出方式移除全部提示訊息

《延伸》

  1. CodeSeven/toastr: Simple javascript toast notifications

上一篇
[十分鐘學習] Swiper - 最新潮的幻燈片/跑馬燈效果
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言