{ 前端技術 }

  • 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”] [/code] 按下按鈕後,就會彈出訊息給使用者知道了。

    可以在此看到 demo & source code