[jQuery] jGrowl - 仿 MacOS X 的 Growl 資訊通知中心

wmh

jGrowl
http://www.stanlemon.net/projects/jgrowl.html
仿 MacOS X 的 Growl 資訊通知中心

jGrowl 是一個非常簡易好用的訊息通知器，類似的介面已經越來越常見了，如果你有跑 AJAX 非同步的 request，非常適合用這個 UI 來呈現訊息。快來試試看吧～

範例一



把 jQuery.js, jgrowl.js, jgrowl.css 載入後，剩下的就這麼簡單啦：

$.jGrowl("Hello world!");

範例二



這是個簡易的客製化樣式，把背景和顏色改掉而已～

div.jGrowl div.manilla {
  background-color: #FFF1C2;
  color: navy;
}

$.jGrowl("嘿，別客氣，多按幾次～", {
  theme: 'manilla',
  sticky: true
});

範例三



進一步的客製化:

div.jGrowl div.flora {
  background:   #E6F7D4 url(flora-notification.png) no-repeat;
  -moz-border-radius:   0px;
  -webkit-border-radius:  0px;
  opacity:      1;
  filter:       alpha(opacity = 100);
  width:        270px;
  height:       90px;
  padding:      0px;
  overflow:     hidden;
  border-color: #5ab500;
}

div.jGrowl div.flora div.message {
  padding:      5px;
  color:        #000;
}

div.jGrowl div.flora div.header {
  background:   url(flora-header.png) no-repeat;
  padding:      5px;
}

div.jGrowl div.flora div.close {
  background:   url(flora-close.png) no-repeat;
  padding:      5px;
  color:        transparent;
  padding:      0px;
  margin:       5px;
  width:        17px;
}

下面偷偷用到了 jQuery 1.3 新功能, 看到了嗎?

$.jGrowl("您是 jsGears.com 第100萬個訪客，請點選<a href=\"#\" id=\"test4\">這裡</a>進行領獎！", {
  theme:  'flora',
  header: "恭喜!",
  speed: 'slow'
});

$('#test4').live('click', function() {
  $.jGrowl("感謝您的支持，但是本站離 100 萬個訪客還很遙遠。請繼續多多支持本站，謝謝。", {speed: 'slow'});
});