in 前端技術

growl for YUI

最近在練習使用 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

Write a Comment

Comment

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料