Growl for YUI

最近在練習使用 YUI ，剛好想到一個感覺滿炫的主題，就是作 growl style 的 notice 。主要的畫面是參考 Gritter: Growl Notification by jQuery 的畫面，然後再使用 YUI 來實作。

實作方式就是包一個 div 後再把 overlay 塞進去，讓他作 FADE 的顯示和消失，他就會漸漸的出現和漸漸的消失，比我想像中的還簡單。

使用方法如下，首先記得把下列所需的的 js 引入： [code lang=“html”] [/code] 然後下載 yui-growl.tar.gz ，並且解開後，並且引用 yui-growl.js。 [code lang=“html”] [/code] 在 之後加入： [code lang=“html”]

[/code] 接著加入下列 css style 和 gritter.png 這個圖片，放置於 css 可以讀取到的地方。 [code lang=“css”] * html #notify {position:absolute; } #notify{position:fixed;right:0px;color:#fff;} .message{display:block;position:static;width:280px;visibility:hidden;margin:10px;} .message div.hd {height:10px;background:url(“gritter.png”) repeat-x scroll 0 -30px transparent} .message div.hd span {padding:10px 0 ;} .message div.bd {background:url(“gritter.png”) repeat-x scroll 0 -60px transparent} .message div.ft {height:10px;background:url(“gritter.png”) repeat-x scroll 0 -300px transparent} .message div.ft span {padding:10px 0 ;} [/code] 可以用下列的使用方法來使用： [code lang=“javascript”] // message : 顯示的訊息 // seconds : 保持顯示的秒數 Widget.growl(message,seconds); [/code] 像我的範例裡就是放置在 Click 事件裡面： [code lang=“html”] Click me [/code] 按下按鈕後，就會彈出訊息給使用者知道了。

可以在此看到 demo & source code 。