Toast Message - 製作Toast(吐司)訊息的執行程式

Toast(吐司)訊息

Toast(吐司)訊息,又稱為Notifications(通知)是一種通知用的訊息框,通常會位於網站的左下或右下位置,用於通知網站使用者相關要注意的訊息。因為這種訊息框可以疊多個,所又被稱作"Toast(吐司)",以下為範例網站:

註:Toast(吐司)訊息通常沒有callback(回呼)的選項,上面的第1、2套是有的。

Toast(吐司)訊息有時會搭配幾個其他的樣式或圖示字型(icon font):

  • Bootstrap
  • Font Awesome
  • Animate.css

流程

  1. 製作Toast(吐司)訊息的執行程式
  2. 整合到Joomla!中的模組

備註:

  • 80%是在第1項,20%在第2項
  • 模組管理用的選項,視個人需求情況而定

第1步:製作Toast(吐司)訊息的執行程式

準備工作

下載所需的函式庫:

解壓縮之後,我們只需要dist目錄裡的檔案,所以先在自己的電腦中新增一個目錄,這裡用的是toast_start,然後把dist目錄裡的檔案複製過去。

我們另外需要使用圖示字型(icon font)的Font Awesome的字型庫,lobibox的函式庫裡面有包含,所以再把font-awesome這個目錄複製到我們的工作目錄toast_start裡。

在根目錄新增一個test.html,裡面的程式碼內容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Toast Test</title>
    <!--Font Awesome圖示字型庫 -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/>
    <!--lobibox用的樣式 -->
    <link rel="stylesheet" href="css/Lobibox.min.css"/>
    <!-- jQuery函式庫 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!--lobibox的通知功能函式庫 -->
    <script src="js/notifications.min.js"></script>
    <!--我們的自訂程式碼檔案 -->
    <script src="js/custom.js"></script>

</head>
<body>

</body>
</html>

在js目錄中新增一個custom.js,裡面的程式碼內容如下:

$( document ).ready(function() {

    //覆蓋原先的選項:icon font使用fontAwesome
    Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
        iconSource: "fontAwesome"
    });

});

測試一下

在custom.js檔案中,});之前,覆蓋設定用的程式碼之後,加入播送一次訊息的的程式碼:

Lobibox.notify('error', {
        title: '過年刮刮樂有刮中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
    });

用瀏覽器打開你的test.html檔案,看能不能看到通知的訊息框出現。

檢查點:是否可以在瀏覽器中看到通知訊息

連續三個訊息

雖然通訊訊息是可以疊著出現的,但我們需要的是連續的訊息框一次出現一個,我們用了Javascript中的setTimeout函式,然後稍微調整一下延遲的時間,因為訊息框消失和出現時,會有一小段的動畫。現在每個訊息是播5秒(delay: 5000),延遲時間大概7秒(setTimeout的第二個參數值7000),後面的訊息播放時間以此類推。

註:動畫的處理除了要考慮持續時間外,也要考量進場和退場的效果時間,使用者看起來才不會太突兀。這裡的教學只是大略算一下,不是非常精準的調整。

為了方便測試三個訊息,我把三個訊息的風格改了一下。請把下面的程式碼,取代你原來的訊息程式碼那段:

    Lobibox.notify('info', {
        title: '過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
    });

    setTimeout(function(){
        Lobibox.notify('success', {
        title: '2號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
    }, 7000);

    setTimeout(function(){
        Lobibox.notify('error', {
        title: '3號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
    }, 14000);

檢查點:是否可以在瀏覽器中看到連續三個通知訊息

輪播這整組訊息

接下來要使用Javascript的setInterval函式,讓這整個連續三個訊息的播放,可以在一個時間內循環地播放。我們把剛剛的連續三個通知訊息放在一個函式裡,然後到setInterval函式中:

var allMessagebox = function(){
    Lobibox.notify('info', {
        title: '過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
    });

    setTimeout(function(){
        Lobibox.notify('success', {
        title: '2號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
    }, 7000);

    setTimeout(function(){
        Lobibox.notify('error', {
        title: '3號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
    }, 14000);
};

//負責第一次的播放
setTimeout(allMessagebox, 0);

//負責接下來的循環播放
setInterval(allMessagebox, 21000);

第一次的播放由setTimeout(allMessagebox, 0);這段來啟動,這只會執行一次而已,之後的播放由setInterval(allMessagebox, 21000);來負責循環播放。整個三個訊息播放完一次,是7000ms的三倍,也就是21000ms。

檢查點:是否可以在瀏覽器中看到連續三個通知訊息,而且可以循環播放。

解決瀏覽器tab(資訊標籤)在不可見時的問題

由於瀏覽器的tab(資訊標籤)在不可見時(inactive或hidden),會快取住或預先轉譯網頁上的執行程式,當使用者先縮小瀏覽器視窗或先去瀏覽別的tab(資訊標籤),再回來這個網頁時,會看到很多個訊息框疊在一起。為了解決這個問題,我們使用ifvisible.js這個函式庫來偵測當瀏覽器的tab(資訊標籤)在不可見時的狀態。

下載所需的函式庫:

把它解壓縮後,把src目錄中的ifvisible.min.js放到我們工作目錄toast_start的js目錄中。

然後加入這個函式庫在我們的test.html中的script區段,在custom.js的script標記之前:

<!--偵測瀏覽器可見狀態的函式庫 -->
    <script src="js/ifvisible.min.js"></script>

再來到我們自訂的custom.js裡,在setTimeout的地方加入判斷目前的瀏覽器是不是可見的情況:

var allMessagebox = function(){
    Lobibox.notify('info', {
        title: '過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
    });

    setTimeout(function(){
      if( ifvisible.now() ){
        Lobibox.notify('success', {
        title: '2號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
      }
    }, 7000);

    setTimeout(function(){
     if( ifvisible.now() ){
        Lobibox.notify('error', {
        title: '3號訊息:過年刮刮樂中了嗎?',
        msg: '如果你和我一樣都是摃龜的話,你可以看這裡更多改運的方法。<br><a href="#test">前往了解</a>',
        delay: 5000,
        sound: false,
        });
      }
    }, 14000);
};

最後我們使用ifvisible所提供的有帶檢查狀態的循環執行函式onEvery,取代原有的setInterval(allMessagebox, 21000);函式這行:

//每x秒執行一次函式,如果瀏覽器不可見會自動停止
ifvisible.onEvery(21, allMessagebox);

註:onEvery使用單位的是秒(s),而setInterval是使用千分之一秒(ms)

檢查點:是否可以在瀏覽器中看到連續三個通知訊息,而且可以循環播放。在瀏覽器不可見或最小化一段時間後,是不是還能正常觀看。