Home » jQuery 外掛

[jQ]jBar

[ 日期： | 瀏覽：5,126 | 迴響：1 ]
範例 1
請協助我把這個效果加到我的網站 (只要 400 元)
沒錯!只要 400 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



jBar 提供一個類似 Twitter 及 Stackoverflow 的提醒狀態列。除了可選擇是要出現在上方或是下方之外，也能自訂其它像是顏色等設定。

套件名稱：jBar
套件版本：N/A
作者網站：http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/
套件網址：http://plugins.jquery.com/project/jBar
發佈日期：2009-10-29
檔案大小：1.56 KB
檔案下載：jquery.bar.js style.css

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

background_color(選填)
描述： jBar 區塊的背景顏色
預設值： '#FFFFFF'
 
color(選填)
描述： jBar 區塊的文字顏色
預設值： '#000'
 
position(選填)
描述： jBar 區塊出現的位置；允許的值有 'top' 及 'bottom'
預設值： 'top'
 
removebutton(選填)
描述： 是否在 jBar 區塊中加入關閉鈕
預設值： true
 
time(選填)
描述： jBar 的顯示時間
預設值： 5000

方法說明：

檢視原始碼 JavaScript
1
2

// 點擊指定的元素後就出現 jBar
$(selector).bar(options);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bar.js"></script>
<style type="text/css">
.content {
	margin-top: 100px;
}
</style>
<script type="text/javascript">
	$(function(){
		// 當點擊 #msgup 時就出現 jBar
		// 且不顯示關閉鈕
		$("#msgup").bar({
			color: '#1e90ff', 
			background_color: '#ffffff',
			removebutton: false,
			message: '設定已經儲存完成!',
			time: 4000
		});
 
		// 當點擊 #msgup 時就出現 jBar
		// 且不顯示關閉鈕
		$("#msgdown").bar({
			color: '#ff6600',
			background_color:'#ffffcc',
			position: 'bottom',
			removebutton: false,
			message: '設定已經儲存完成!',
			time:4000
		});
 
		// 當點擊 #msgup 時就出現 jBar
		// 且自動點擊一次
		$("#msgupwithremove").bar({
			color: 'red',
			background_color:'#000',
			message: '發生不可預知的錯誤!'
		}).click();
	});
</script>
 
<body>
	<div class="content">
		<a id="msgup" href="#">Demo Top</a>
		<a id="msgdown" href="#">Demo Bottom</a>
		<a id="msgupwithremove" href="#">Demo Up (Cross)</a>
	</div>
</body>

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註：
使用時得有個元素的 className 為 .content 才行。且在 IE6 中的支援度很差。

1 筆針對 [jQ]jBar 的迴響

發表迴響