最近在練習使用 YUI ，剛好想到一個感覺滿炫的主題，就是作 growl style 的 notice 。主要的畫面是參考 Gritter: Growl Notification by jQuery 的畫面，然後再使用 YUI 來實作。
實作方式就是包一個 div 後再把 overlay 塞進去，讓他作 FADE 的顯示和消失，他就會漸漸的出現和漸漸的消失，比我想像中的還簡單。
使用方法如下，首先記得把下列所需的的 js 引入：
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container-min.js"></script>
然後下載 yui-growl.tar.gz ，並且解開後，並且引用 yui-growl.js。
<script type="text/javascript" src="js/yui-growl.js"></script>
在 <body> 之後加入：
<div id="notify"></div>
接著加入下列 css style 和 gritter.png 這個圖片，放置於 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 ;}
可以用下列的使用方法來使用：
// message : 顯示的訊息 // seconds : 保持顯示的秒數 Widget.growl(message,seconds);
像我的範例裡就是放置在 Click 事件裡面：
<input type="text" id="text">
<button value="" onclick="Widget.growl(YAHOO.util.Dom.get('text').value+ '<br/>'+Math.random(),2);" />Click me</button>
按下按鈕後，就會彈出訊息給使用者知道了。
可以在此看到 demo & source code 。
学习一下。准备上班去了，但是好久没碰css了。