Home » jQuery 外掛

[jQ]jQueryToast 0.1

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



Toast 對於 Android 系統使用者來說是很常見到的一種提示方式，小巧簡單又明顯的方式來顯示訊息。所以囉~就有網友把這樣的效果包成一個小巧的 jQuery 外掛，讓您只要用簡單的語法就能做出 Android-like 的訊息提示囉。

套件名稱：jQueryToast
套件版本：0.1
作者網站：http://coplay.dyndns.org:9999/~kel/jquerytoast/
套件網址：N/A
發佈日期：2011-09-26
檔案大小：2.68 KB
檔案下載：jquery.toast.js

參數說明：

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

message(選填)
描述： 要顯示的提示內容
預設值： "This is a Toast"
 
displayTime(選填)
描述： 提示訊息的停留(顯示)時間
預設值： 2000
 
inTime(選填)
描述： 提示訊息的淡入時間
預設值： 300
 
outTime(選填)
描述： 提示訊息的淡出時間
預設值： 200
 
maxWidth(選填)
描述： 提示訊息框最大的寬度
預設值： 400

方法說明：

檢視原始碼 JavaScript
1
2

// 顯示 Android-like 的提示訊息
$.toast(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
49
50
51
52
53

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.toast.js"></script>
<style type="text/css">
	.toast{
		/* border properties */
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border: 2px solid #CCCCCC;
 
		/* Aesthetics */
		position: absolute;
		padding: 10px;
		color: #ffffff;
		background-color:rgba(0,0,0, 0.8);
		display:none;
	}
</style>
<script type="text/javascript">
	$(function(){
 
		$("#demoLink1").click(function(e){
			// 設定顯示的提示訊息及顯示停留時間
			$.toast({
				message: "這是一個簡單的訊息提示",
				displayTime: 4000,
				inTime: 100,
				outTime: 400
			});
 
			return false;
		});
 
		$("#demoLink2").click(function(e){
			// 連續的提示訊息會排隊一一出現
			$.toast({message: "第一個訊息提示"});
			$.toast({message: "第二個訊息提示"});
			$.toast({message: "第三個訊息提示"});
			$.toast({message: "第四個訊息提示"});
 
			return false;
		});
 
	});
</script>
 
<body>
	<a id="demoLink1" href="#">訊息提示測試 - Click Me!</a>
 
	<br /><br />
 
	<a id="demoLink2" href="#">訊息提示隊列測試 - Click Me!</a>
</body>
範例 1

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

6 筆針對 [jQ]jQueryToast 0.1 的迴響

    • 效果是沒問題啦~主要是背景顏色的部份用了 css3 的 rgba() 方式，所以在 IE9 之前的瀏覽器都沒有用。現在我多補上一句就能 hold 住了。

  3. 顆顆可以再請問一下嗎？

    有沒有辦法可以：
    在背景(格子以外)或在格子內點一下就會提早消失的方法？

    麻煩瞜:)

發表迴響