[jQuery] jGrowl - 仿 MacOS X 的 Growl 資訊通知中心
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jGrowl[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://www.stanlemon.net/projects/jgrowl.html[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 仿 MacOS X 的 Growl 資訊通知中心
jGrowl 是一個非常簡易好用的訊息通知器，類似的介面已經越來越常見了，如果你有跑 AJAX 非同步的 request，非常適合用這個 UI 來呈現訊息。快來試試看吧～
[color=Navy][size=4][b]範例一[/b][/size][/color]
[jsg.example]
<input type="button" value="先來個簡單的" id="test1" title="快按啊..." />
[/jsg.example]
把 jQuery.js, jgrowl.js, jgrowl.css 載入後，剩下的就這麼簡單啦：
[code js]
$.jGrowl("Hello world!");
[/code]
[color=Navy][size=4][b]範例二[/b][/size][/color]
[jsg.example]
<input type="button" value="簡易客製化樣式" title="快按啊..." id="test2" />
[/jsg.example]
這是個簡易的客製化樣式，把背景和顏色改掉而已～
[code css]
div.jGrowl div.manilla {
background-color: #FFF1C2;
color: navy;
}
[/code]
[code js]
$.jGrowl("嘿，別客氣，多按幾次～", {
theme: 'manilla',
sticky: true
});
[/code]
[color=Navy][size=4][b]範例三[/b][/size][/color]
[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]
進一步的客製化:
[code css]
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;
}
[/code]
下面偷偷用到了 jQuery 1.3 新功能, 看到了嗎? :lol
[code js]
$.jGrowl("您是 jsGears.com 第100萬個訪客，請點選<a href=\"#\" id=\"test4\">這裡</a>進行領獎！", {
theme: 'flora',
header: "恭喜!",
speed: 'slow'
});
$('#test4').live('click', function() {
$.jGrowl("感謝您的支持，但是本站離 100 萬個訪客還很遙遠。請繼續多多支持本站，謝謝。", {speed: 'slow'});
});
[/code]
頁:
[1]