返回列表 發帖

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

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'});
});
To infinity and beyond!

返回列表 回復 發帖