動態提示 (Dynamic Tips)

Zeuxis  2010-07-02  Code Snippet / Notes / Project

記錄一下動態增加和顯示提示的代碼.主要特別是:
當不斷加入時,不會即時更新,
當沒有再更新時會自動將已增加的提示一個接一個顯示
最後再顯示回預設的第一個提示

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
54
55
56
57
58
59
60
61
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
var Tip = {
	default_tips: "",
	tips_store: [],
	timer_id: "",
	
	add_tips_to_store: function(tips) {
		if (this.default_tips == "") {
			this.default_tips = $("div#tips").html();
		}
		
		this.tips_store.push(tips);
		
		if (this.timer_id != "") {
			clearTimeout(this.timer_id);
		}

		this.timer_id = setTimeout(function() {
			Tip.update_tips();
		}, 2000);
	},
	
	update_tips: function() {
		//console.log(this.tips_store);
		
		if (this.tips_store.length > 0) {
		
			$("div#tips").fadeOut("slow", function() {
				var tips = Tip.tips_store.shift();
				$(this).html(tips).fadeIn("slow", function() {
					Tip.update_tips();
				});
			});
		
		}else{
			$("div#tips").fadeOut("slow", function() {
				$(this).html(Tip.default_tips).fadeIn("slow");
			});
		}
	},
	
	set_tips: function(tips) {
		this.set_default_tips(tips);
		$("div#tips").html(tips);
	},
	
	set_default_tips: function(tips) {
		this.default_tips = tips;
	}
}

$(document).ready(function() {
	Tip.add_tips_to_store("This is a test 1");
	Tip.add_tips_to_store("This is a test 2");
	Tip.add_tips_to_store("This is a test 3");
	Tip.add_tips_to_store("This is a test 4");	
})
</script>

<div id="tips">This is a test Default Message</div>
© Copyright 2007 - 2023 by Zeuxis Lo.