jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: [jQuery] jGrowl - 仿 MacOS X 的 Growl 資訊通知中心 [打印本頁]

作者: wmh 時間: 2009-4-21 00:56 標題: [jQuery] jGrowl - 仿 MacOS X 的 Growl 資訊通知中心

jGrowl

http://www.stanlemon.net/projects/jgrowl.html

仿 MacOS X 的 Growl 資訊通知中心

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

範例一

[jsg.example]
<input type="button" value="先來個簡單的" id="test1" title="快按啊..." />
[/jsg.example]

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

$.jGrowl("Hello world!");

範例二

[jsg.example]
<input type="button" value="簡易客製化樣式" title="快按啊..." id="test2" />
[/jsg.example]

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

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

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

範例三

[jsg.example]
<input type="button" value="客製化樣式" title="快按啊..." id="test3" />
<link rel="stylesheet" href="_lib/jquery/plugins/jgrowl-1.1.2/jquery.jgrowl.css" type="text/css" />
<link rel="stylesheet" href="_lib/jquery/plugins/jgrowl-1.1.2/demo.css" type="text/css" />
<style type="text/css">
#jGrowl .message { margin:0 !important; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jgrowl-1.1.2/jquery.jgrowl_minimized.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
  $('#test1').click(function() {
$.jGrowl("Hello world!");
  });
  $('#test2').click(function() {
$.jGrowl("嘿，別客氣，多按幾次～", {
   theme:  'manilla',
   sticky: true
});
  });
  $('#test3').click(function() {
$.jGrowl("您是 jsGears.com 第100萬個訪客，請點選<a href=\"#\" id=\"test4\">這裡</a>進行領獎！", {
   theme:  'flora',
   header: "恭喜!",
   speed: 'slow'
});
  });
  $('#test4').live('click', function() {
$.jGrowl("感謝您的支持，但是本站離 100 萬個訪客還很遙遠。請繼續多多支持本站，謝謝。", {speed: 'slow'});
  });
});
})(jQuery);
</script>
[/jsg.example]

進一步的客製化:

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'});
});

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)