Growl 實際執行畫面

網站中使用 AJAX 讀取檔案或做其他動作時，有時候需要通知使用者完成或者是提示使用者可以進行下一個動作或流程，這時候就需要像這樣的一個效果。Growl 一個簡單又方便的提示訊息視窗，使用 Mootools 框架製作可以創建淡入淡出的效果。

使用方法：
第一步 先載入程式所需要的檔案
//使用 Google AJAX API 取得 Mootools 1.4.5 版本
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
//Growl 的主程式碼
<script type="text/javascript" charset="utf-8" src="growl-compressed.js"></script>

第二步 只要在需要產生提示訊息的時間點或動作加上以下的程式碼
Growl.Smoke({
title: 'Window.Growl By Daniel Mota',
text: 'http://icebeat.bitacoras.com',
image: 'growl.jpg',
duration: 2
});

附上程式可修改參數

參數	說明
image	顯示圖片
title	標題文字
text	內容文字
duration	顯示秒數

Growl 可以用的方法有兩種
一種是 Smoke 程式碼如下
Growl.Smoke({
title: 'Window.Growl By Daniel Mota',
text: 'http://icebeat.bitacoras.com',
image: 'growl.jpg',
duration: 2
}); 執行結果提示視窗會出現在右上方

Growl.Smoke 實際執行畫面

另外一種是 Bezel 程式碼如下
Growl.Bezel ({
title: 'Window.Growl By Daniel Mota',
text: 'http://icebeat.bitacoras.com',
image: 'growl.jpg',
duration: 2
}); 執行結果提示視窗會出現在正中央

Growl.Bezel 實際執行畫面

作者網站：http://icebeat.bitacoras.com/mootools/growl/
檔案大小：121 KB
檔案下載：http://icebeat.bitacoras.com/mootools/growl/growl.zip
檔案備份：下載