男丁格爾's 脫殼玩 » 男丁格爾 http://abgne.tw JavaScript, jQuery 及 CSS 等技巧應用 Wed, 10 Mar 2010 05:32:55 +0000 http://wordpress.org/?v=2.9 en hourly 1 [jQ]利用 jQuery 來製作網頁頁籤(Tab) http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html#comments Wed, 10 Mar 2010 05:32:55 +0000 男丁格爾 http://abgne.tw/?p=2930 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式]]> 在網路知識爆炸的 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式。



每個標籤都有相對應的內容區塊，這樣只要一個小小的位置能放置的資訊就會比原先的更多，就像是原本只是一層矮平房，現在把它蓋成 101 大樓一樣！

廢話不多說，讓我們先來看看 HTML 的部份吧：

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

<body>
	<div class="abgne_tab">
		<ul class="tabs">
			<li><a href="#tab1">男丁格爾</a></li>
			<li><a href="#tab2">jQuery</a></li>
		</ul>
 
		<div class="tab_container">
			<div id="tab1" class="tab_content">
				<h2>關於作者</h2>
				<p>目前工作是網頁開發為主，因此針對了 HTML, JavaScript, CSS 等知識特別深入研究。若有任何問題，歡迎直接留言或是透過 Mail 討論。</p>
			</div>
			<div id="tab2" class="tab_content">
				<h2>jQuery is a new kind of JavaScript Library.</h2>
				<p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript</p>
			</div>
		</div>
	</div>
</body>

.abgne_tab 區塊是用來包覆我們的頁籤區塊，而 ul 及 li 是用來當標籤，其中的超連結是利用錨點(Anchor)的方式來設定，對應到指定的 id 元素。除了可以讓 jQuery 來直接取到元素之外，當 JavaScript 被停用時，至少還能用原本錨點(Anchor)的功能。

?檢視原始碼 CSS
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

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne_tab {
	clear: left;
	width: 400px;
	margin: 10px 0;
}
ul.tabs {
	width: 100%;
	height: 32px;
	border-bottom: solid 1px #999;
	border-left: solid 1px #999;
}
ul.tabs li {
	float: left;
	height: 31px;
	line-height: 31px;
	overflow: hidden;
	position: relative;
	margin-bottom: -1px;	/* 讓 li 往下移來遮住 ul 的部份 border-bottom */
	border: solid 1px #999;
	border-left: none;
	background: #e1e1e1;
}
ul.tabs li a {
	display: block;
	padding: 0 20px;
	color: #000;
	border: solid 1px #fff;
	text-decoration: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
ul.tabs li.active  {
	background: #fff;
	border-bottom: solid 1px #fff;
}
ul.tabs li.active a:hover {
	background: #fff;
}
div.tab_container {
	clear: left;
	width: 100%;
	border: 1px solid #999;
	border-top: none;
	background: #fff;
}
div.tab_container .tab_content {
	padding: 20px;
}
div.tab_container .tab_content h2 {
	margin: 0 0 20px;
}

當設定好 CSS 排版之後，大概就能看到基本的畫面了：



筆者的想法是，在未加上程式之前把內容都先顯示出來，預設讓 JavaScript 被停用或是載入失敗時還能看到內容。接著沒問題之後，就是加上 jQuery 來實做出完整的頁籤效果囉：

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

$(function(){
	// 預設顯示第一個 Tab
	var _showTab = 0;
	$('ul.tabs li').eq(_showTab).addClass("active");
	$('.tab_content').hide().eq(_showTab).show();
 
	// 當 li 頁籤被點擊時...
	// 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
	$('ul.tabs li').click(function() {
		// 找出 li 中的超連結 href(#id)
		var $this = $(this),
			_clickTab = $this.find('a').attr('href');
		// 把目前點擊到的 li 頁籤加上 .active
		// 並把兄弟元素中有 .active 的都移除 class
		$this.addClass("active").siblings('.active').removeClass('active');
		// 淡入相對應的內容並隱藏兄弟元素
		$(_clickTab).fadeIn().siblings().hide();
 
		return false;
	}).find('a').focus(function(){
		this.blur();
	});
});

一開始可以設定是要先顯示第幾個標籤的內容，接著就是把不顯示的部份給隱藏起來。當完成顯然及隱藏的步驟之後，就能看到完整的效果畫面了：



當點擊其它的頁籤時會立即的切換顯示相對應的內容。若想用滑鼠的滑入來觸發頁籤切換的話，只要把 click 事件改成 mouseover 事件就可以囉。

雖然完成了一個頁籤區塊，但有時可能一個頁面上就會放了2-3個頁籤區塊。若每個頁籤區塊的結構都差不多的話，我們就不用一一的為每個區塊來寫程式，只要善用 jQuery 的 each() 就能快速的完成 N 個頁籤區塊的設定：

?檢視原始碼 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

$(function(){
	// 預設顯示第一個 Tab
	var _showTab = 0;
	$('.abgne_tab').each(function(){
		// 目前的頁籤區塊
		var $tab = $(this);
 
		$('ul.tabs li', $tab).eq(_showTab).addClass("active");
		$('.tab_content', $tab).hide().eq(_showTab).show();
 
		// 當 li 頁籤被點擊時...
		// 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
		$('ul.tabs li', $tab).click(function() {
			// 找出 li 中的超連結 href(#id)
			var $this = $(this),
				_clickTab = $this.find('a').attr('href');
			// 把目前點擊到的 li 頁籤加上 .active
			// 並把兄弟元素中有 .active 的都移除 class
			$this.addClass("active").siblings('.active').removeClass('active');
			// 淡入相對應的內容並隱藏兄弟元素
			$(_clickTab).fadeIn().siblings().hide();
 
			return false;
		}).find('a').focus(function(){
			this.blur();
		});
	});
});

這樣出來的頁籤(Tab)效果就已經蠻實用的，若美術設計能力夠的話，還能改用圖片的標籤來美化呢！

範例瀏覽：
http://demonstration.abgne.tw/jquery/0020/0020_1.html
http://demonstration.abgne.tw/jquery/0020/0020_2.html

]]> http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html/feed 0 [jQ]用 jQuery 做畫廊 – jQuery 版的 Nike 首頁產品展示 http://abgne.tw/jquery/apply-jquery/jquery-nike-gallery.html http://abgne.tw/jquery/apply-jquery/jquery-nike-gallery.html#comments Thu, 04 Mar 2010 06:03:02 +0000 男丁格爾 http://abgne.tw/?p=2896 Nike.com.tw 的網址過來，讓筆者以為梅干要轉行賣鞋或是透過他買鞋可以拿到流血價咧！結果是...看到了它首頁的產品展示效果蠻不錯的，想討論看看是否能用 jQuery 來做出類似的功能]]> 昨天梅干傳了一個 Nike.com.tw 的網址過來，讓筆者以為梅干要轉行賣鞋或是透過他買鞋可以拿到流血價咧！結果是...看到了它首頁的產品展示效果蠻不錯的，想討論看看是否能用 jQuery 來做出類似的功能。



稍微玩一下 Nike 的效果時會發現，產品項目的排列是左右都是小圖，只有中間顯示的是大圖。而當點擊右邊的產品時，全部的項目會往左移動，若是點擊左邊的產品時，則是往右移動。中間較大的區塊是顯示所點擊到的項目。另外，左右兩邊的項目預設是呈現半透明的效果，當滑鼠移上去時才會變成不透明。且當左右兩邊項目移動時，此時也是變成不透明的。

總結一下要實現的功能：
1.產品項目的排列要變程左右小圖，中間大圖的樣式。
2.點擊左邊項目就整個往右移；點擊右邊項目就整個往左移。中間區塊就移到所點擊的項目。
3.左右項目預設是半透明，當滑鼠移到某項目時才變成不透明，且當點擊後移動時也是不透明。


為了程式方便撰寫，筆者就把它設計成使用 3 組 ul 來當產品項目清單：



圖中所看到的都是獨立的一組 ul 元素，雖然每一組的第一個項目都是不一樣的，但這樣當大家都往前左或是往右移動時是能一致的。只要把它們組起來的話就會變成：



接著就動手來設計 HTML 及 CSS 囉：

?檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11

<body>
	<div class="nike">
		<ul>
			<li><a href="#"><img src="small01.gif" /></a></li>
			<li><a href="#"><img src="small02.gif" /></a></li>
			<li><a href="#"><img src="small03.gif" /></a></li>
			<li><a href="#"><img src="small04.gif" /></a></li>
			<li><a href="#"><img src="small05.gif" /></a></li>
		</ul>
	</div>
</body>

一開始只是原始的 ul 產品項目，筆者等等會透過 jQuery 來產生需要的 3 組 ul 並放在 nike_left, nike_right 及 nike_main 區塊中。

?檢視原始碼 CSS
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

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
a img {
	border: none;
}
.nike {
	width: 300px;
	height: 100px;
	position: relative;
}
.nike div ul {
	width: 9999px;
	position: absolute;
}
.nike div ul li {
	float: left;
}
.nike div ul li a {
	display: block;
	width: 50px;	/* 小圖的寬 */
	height: 50px;	/* 小圖的高 */
}
.nike .nike_left {
	position: absolute;
	left: 0;
	top: 25px;
	width: 100px;	/* 小圖的寬 * 2 */
	height: 50px;
	overflow: hidden;
	border: solid 1px #fff;
}
.nike .nike_right {
	position: absolute;
	right: 0;
	top: 25px;
	width: 100px;	/* 小圖的寬 * 2 */
	height: 50px;
	overflow: hidden;
	border: solid 1px #fff;
}
.nike .nike_main {
	position: absolute;
	left: 100px;	/* 小圖的寬 * 2 */
	top: 0;
	width: 100px;	/* 大圖的寬 * 1 */
	height: 100px;
	overflow: hidden;
}
.nike .nike_main ul li a {
	width: 100px;	/* 大圖的寬 */
	height: 100px;	/* 大圖的寬 */
}

再來就要打起精神仔細看了喔，筆者要先用 jQuery 來產生 ul 清單後再一一綁定其事件：

?檢視原始碼 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

$(function(){
	// 先取得 .nike 及原始的 ul 項目
	// 接著產生三組 div 並各自包一個 ul 項目
	// 再來取得一些額外的參數、小圖及大圖的名稱
	var $nike = $('.nike'),
		$source = $nike.children('ul').remove(),
		$leftUl = $('<div class="nike_left"><ul></ul></div>').children(),
		$rightUl = $('<div class="nike_right"><ul></ul></div>').children(),
		$mainUl = $('<div class="nike_main"><ul></ul></div>').children(),
		$sourceLi = $source.children(),
		_liStr = $source.html(),
		_itemLen = $sourceLi.length,
		_middle = Math.ceil(_itemLen / 2),
		_small = /small/ig,
		_big = 'big',
		_smallWidth = 50, _bigWidth = 100;
 
	// 幫左邊 ul 清單加入 li 項目
	$leftUl.append(_liStr + getLiItem($sourceLi, 0, _middle));
	// 幫右邊 ul 清單加入 li 項目
	$rightUl.append(getLiItem($sourceLi, _middle, _itemLen) + _liStr + getLiItem($sourceLi, 0, _itemLen - _middle));
	// 幫中間 ul 清單加入 li 項目
	$mainUl.append((getLiItem($sourceLi, _middle - 1, _itemLen) + _liStr).replace(_small, _big));
	// 把 ul 清單部份都加到 .nike 中
	$nike.append($leftUl.parent(), $rightUl.parent(), $mainUl.parent());
 
	// 幫右邊 ul li a 加上 click 事件並產生 0.5 的透明度
	// 當點擊到時往左移動項目
	$rightUl.find('li a').click(function(){
		move(($(this).parent().index() + 1) % $rightUl.children().length);
 
		return false;
	}).fadeTo(200, 0.5);
 
	// 幫左邊 ul li a 加上 click 事件並產生 0.5 的透明度
	// 當點擊到時往右移動項目
	$leftUl.find('li a').click(function(){
		var _index = $(this).parent().index();
		if(_index<=1){
			$leftUl.add($rightUl).css('left', _itemLen * _smallWidth * -1);
			$mainUl.css('left', _itemLen * _bigWidth * -1);
			_index += _itemLen;
		}
		_index = (_index - (_itemLen - _middle)) % $leftUl.children().length;
		move(_index);
 
		return false;
	}).fadeTo(200, 0.5);
 
	// 幫左右兩邊的 ul li a 加上 hover 事件
	// 當滑鼠移到項目時就變成不透明；移出則再變成 0.5 的透明度
	$rightUl.add($leftUl).find('li a').hover(function(){
		$(this).fadeTo(200, 1);
	}, function(){
		$(this).fadeTo(200, 0.5);
	});
 
	// 控制移動的函式
	function move(i){
		// 移動左右清單
		// 移動時變成不透明
		$leftUl.add($rightUl).stop(false, true).animate({
			left: i * _smallWidth * -1
		}, changeLeft).find('li a').css('opacity', 1);
 
		// 移動中間清單
		$mainUl.stop(false, true).animate({
			left: i * _bigWidth * -1
		}, changeLeft);
	}
 
	// 當完成移動後的處理函式
	function changeLeft(){
		var $this = $(this),
			dis = $this.parent().attr('className') == 'nike_main' ? _bigWidth : _smallWidth,
			i = (parseInt($this.css('left'), 10) || 0) / dis * -1;
 
		// 處理左右清單的位移
		if(i >= _itemLen){
			$(this).css('left', dis * (i - 5) * -1);
		}
 
		// 把左右清單的 li a 變成 0.5 的透明度
		if(dis==_smallWidth){
			$(this).find('li a').css('opacity', 0.5);
		}
	}
 
	// 組成 li 項目的函式
	function getLiItem(source, startIndex, endIndex){
		var rtvl = '';
		for(var i=startIndex;i<endIndex;i++){
			rtvl += '<li>' + source.eq(i).html() + '</li>';
		}
		return rtvl;
	}
});

程式碼雖然看起來很長，但基本上就是先產生 3 組區塊及清單，然後加上 click 及移動的事件而已。當完成後就能看到很類似 Nike 的陽春畫面了：



各位可以試著玩看看，看是否有達到一開始筆者所預訂的那幾項功能需求！接著更大的難題來了，要如何幫它加上美美的外框呢？

筆者這邊把外框當成是遮罩的一種，因此只要讓遮罩能在最上層並中空的話，這樣就有加上外框的效果了：

?檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13

/* .mask 為遮罩用的 div */
.nike .mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 100px;
	background: transparent url(mask.png);	/* 遮罩圖片 */
	z-index: 2;
}
.nike .fake {
	z-index: 3;
}

利用設定 z-index 的方式來達到階層的控制，但 IE 6 不支援透明的 PNG24 圖檔，所以...升級吧！現在已經有了 .mask 樣式了，接下來一樣是利用程式來加上它並做一些 Magic 的處理：

?檢視原始碼 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

$(function(){
	// 先取得 .nike 及原始的 ul 項目
	// 接著產生三組 div 並各自包一個 ul 項目
	// 再來取得一些額外的參數、小圖及大圖的名稱
	var $nike = $('.nike'),
		$source = $nike.children('ul').remove(),
		$leftUl = $('<div class="nike_left"><ul></ul></div>').children(),
		$rightUl = $('<div class="nike_right"><ul></ul></div>').children(),
		$mainUl = $('<div class="nike_main"><ul></ul></div>').children(),
		$sourceLi = $source.children(),
		_liStr = $source.html(),
		_itemLen = $sourceLi.length,
		_middle = Math.ceil(_itemLen / 2),
		_small = /small/ig,
		_big = 'big',
		_smallWidth = 50, _bigWidth = 100;
 
	// 幫左邊 ul 清單加入 li 項目
	$leftUl.append(_liStr + getLiItem(0, _middle));
	// 幫右邊 ul 清單加入 li 項目
	$rightUl.append(getLiItem(_middle, _itemLen) + _liStr + getLiItem(0, _itemLen - _middle));
	// 幫中間 ul 清單加入 li 項目
	$mainUl.append((getLiItem(_middle - 1, _itemLen) + _liStr).replace(_small, _big));
	// 把 ul 清單部份都加到 .nike 中
	$nike.append($leftUl.parent(), $rightUl.parent(), $mainUl.parent());
	// 加入遮罩 .mask
	$nike.append('<div class="mask"></div>');
	// 加入控制用的遮罩 ul
	$nike.append($leftUl.parent().clone().addClass('fake'), $rightUl.parent().clone().addClass('fake'), $mainUl.parent().clone().addClass('fake'));
	// 隱藏控制用的遮罩 ul 中的圖片
	$nike.find('.fake img').css('opacity', 0);
	// 幫左右兩邊的 ul li a 加上 0.5 的透明度
	$rightUl.add($leftUl).find('li a').fadeTo(200, 0.5);
 
	// 幫控制用的右邊遮罩 ul li a 加上 click 事件
	// 當點擊到時往左移動項目
	$('.nike_right.fake').find('li a').click(function(){
		move(($(this).parent().index() + 1) % $rightUl.children().length);
		return false;
	});
 
	// 幫控制用的左邊遮罩 ul li a 加上 click 事件
	// 當點擊到時往右移動項目
	$('.nike_left.fake').find('li a').click(function(){
		var _index = $(this).parent().index();
		if(_index<=1){
			$leftUl.add($rightUl).add($('.nike_right.fake ul, .nike_left.fake ul')).css('left', _itemLen * _smallWidth * -1);
			$mainUl.add($('.nike_main.fake ul')).css('left', _itemLen * _bigWidth * -1);
			_index += _itemLen;
		}
		move((_index - (_itemLen - _middle)) % $leftUl.children().length);
		return false;
	});
 
	// 幫控制用的左右兩邊遮罩的 ul li a 加上 hover 事件
	// 當滑鼠移到項目時就變成不透明；移出則再變成 0.5 的透明度
	$('.nike_right.fake, .nike_left.fake').find('li a').hover(function(){
		var $this = $(this);
		($this.parents('div').attr('className').indexOf('nike_right')>-1 ? $rightUl : $leftUl).children('li').eq($this.parent().index()).children().fadeTo(200, 1);
	}, function(){
		var $this = $(this);
		($this.parents('div').attr('className').indexOf('nike_right')>-1 ? $rightUl : $leftUl).children('li').eq($this.parent().index()).children().fadeTo(200, 0.5);
	});
 
	// 控制移動的函式
	function move(i){
		// 移動左右清單
		// 移動時變成不透明
		$leftUl.add($rightUl).add($('.nike_right.fake ul, .nike_left.fake  ul')).stop(false, true).animate({
			left: i * _smallWidth * -1
		}, changeLeft).find('li a').css('opacity', 1);;
 
		// 移動中間清單
		$mainUl.add($('.nike_main.fake ul')).stop(false, true).animate({
			left: i * _bigWidth * -1
		}, changeLeft);
	}
 
	// 當完成移動後的處理函式
	function changeLeft(){
		var $this = $(this),
			dis = $this.parent().attr('className').indexOf('nike_main')>-1 ? _bigWidth : _smallWidth,
			i = (parseInt($this.css('left'), 10) || 0) / dis * -1;
 
		// 處理左右清單的位移
		if(i >= _itemLen){
			$(this).css('left', dis * (i - _itemLen) * -1);
		}
 
		// 把左右清單的 li a 變成 0.5 的透明度
		if(dis==_smallWidth){
			$(this).find('li a').css('opacity', 0.5);
		}
	}
 
	// 組成 li 項目的函式
	function getLiItem(startIndex, endIndex){
		var rtvl = '';
		for(var i=startIndex;i<endIndex;i++){
			rtvl += '<li>' + $sourceLi.eq(i).html() + '</li>';
		}
		return rtvl;
	}
});

嘿~~快來看看效果變成怎樣：



是不是變的更有質感的呢！各位只要把圖片及遮罩替換後，就能有屬於自己的產品展示功能囉。

範例瀏覽：
http://demonstration.abgne.tw/jquery/0019/0019_1.html
http://demonstration.abgne.tw/jquery/0019/0019_2.html
http://demonstration.abgne.tw/jquery/0019/0019_3.html

]]> http://abgne.tw/jquery/apply-jquery/jquery-nike-gallery.html/feed 4 jQuery 1.4 的第二個修正版 - jQuery 1.4.2 http://abgne.tw/jquery/jquery-resources/jquery-1-4-2-released.html http://abgne.tw/jquery/jquery-resources/jquery-1-4-2-released.html#comments Mon, 22 Feb 2010 06:59:33 +0000 男丁格爾 http://abgne.tw/?p=2888 2010/02/20)，jQuery 官方又釋出 1.4 的第二個修正版，修正了自 1.4 版後的一些明顯的問題之外，也在效能方便有大大的提升]]> 在我們還在過年的期間(2010/02/20)，jQuery 官方又釋出 1.4 的第二個修正版，修正了自 1.4 版後的一些明顯的問題之外，也在效能方面有大大的提升。

jQuery 1.4.2 下載位置
正常版本：http://code.jquery.com/jquery-1.4.2.js
壓縮版本：http://code.jquery.com/jquery-1.4.2.min.js

1.4.2 版主要新增了 .delegate() 及 .undelegate() 這兩個函式，提供類似 .live() 及 .die() 的效果：

?檢視原始碼 JavaScript
1
2
3

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

再來就是重寫了 Event 相關的程式碼，讓效能硬是比 1.4.1 版提升了約 2倍，甚至比 1.3.2 版提升了約 3倍呢！



更多詳細的更新內容可以在 jQuery 1.4.2 Released 中看到清楚的說明。

]]> http://abgne.tw/jquery/jquery-resources/jquery-1-4-2-released.html/feed 2 [jQ]滑出式問與答(Q&A)清單 http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html#comments Mon, 08 Feb 2010 05:19:19 +0000 男丁格爾 http://abgne.tw/?p=2859 一般商務型或是需要有客服的網站都會提供簡易的問與答頁面，會把一些常見的問題整理成一個清單後，接著再針對問題來一一回答。當顧客有使用上或是其它疑問時，可以先自行透過問與答來找找看是否有符合自己問題的項目。

但請試著想像一下，若每一項問題的回答都2-3行的話，當問題項目一多的時候，這樣網頁就會變的很長很長...。如果能把回答暫時先隱藏起來，當顧客點擊到該問題項目時才展開答案的話，至少網頁應該就會變的比較乾淨一點。

因為問與答是一對一的項目型態，因此筆者就直接用 ul 及 li 來當做項目使用：

?檢視原始碼 HTML
1
2
3
4
5
6
7
8
9

<div id="qaContent">
	<h3 class="qa_group_1">問題分類</h3>
	<ul class="accordionPart">
		<li>
			<div class="qa_title">問題</div>
			<div class="qa_content">答案</div>
		</li>
	</ul>
</div>

h3 是用來當做問題分類用的，等等也會用 CSS 來把它加上背景圖片做美化。而每一組 li 都會有問題及答案的 div，且各自有不同的 className。

?檢視原始碼 CSS
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

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#qaContent {
	width: 500px;
}
#qaContent h3 {
	width: 500px;
	height: 22px;
	text-indent: -9999px;
}
#qaContent h3.qa_group_1 {
	background: url(qa_group_1.gif) no-repeat;
}
#qaContent h3.qa_group_2 {
	background: url(qa_group_2.gif) no-repeat;
}
#qaContent ul.accordionPart {
	margin: 10px 10px 50px 30px;
}
#qaContent ul.accordionPart li {
	border-bottom: solid 1px #e3e3e3;
	padding-bottom: 12px;
	margin-top: 12px;
}
#qaContent ul.accordionPart li .qa_title {
	background: url(icon_q_a.gif) no-repeat 0px 3px;
	padding-left: 28px;
	color: #1186ec;
	cursor: pointer;
}
#qaContent ul.accordionPart li .qa_title_on {
	text-decoration: underline;
}
#qaContent ul.accordionPart li .qa_content {
	margin: 6px 0 0;
	background: url(icon_q_a.gif) no-repeat 0px -24px;
	padding-left: 28px;
	color: #666;
}

CSS 這邊只是幫 h3 標題換成指定的背景圖片標題，且把問題及答案前面都加個 Icon 來區別用。

最後就是 jQuery 上場來幫我們的問與答加上魔法效果囉：

?檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12

$(function(){
	// 幫 div.qa_title 加上 hover 及 click 事件
	// 同時把兄弟元素 div.qa_content 隱藏起來
	$('#qaContent ul.accordionPart li div.qa_title').hover(function(){
		$(this).addClass('qa_title_on');
	}, function(){
		$(this).removeClass('qa_title_on');
	}).click(function(){
		// 當點到標題時，若答案是隱藏時則顯示它；反之則隱藏
		$(this).next('div.qa_content').slideToggle();
	}).siblings('div.qa_content').hide();
});

最後我們就能預覽畫面及效果：



這樣是不是效果會比落落長的清單好很多呢？！不過若是清單一多時，要一一幫問題及答案加上 className 就變成是麻煩的事(可用後端程式來輸出)，所以筆者這邊就把它改用程式來加：

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

$(function(){
	// 幫 #qaContent 的 ul 子元素加上 .accordionPart
	// 接著再找出 li 中的第一個 div 子元素加上 .qa_title
	// 並幫其加上 hover 及 click 事件
	// 同時把兄弟元素加上 .qa_content 並隱藏起來
	$('#qaContent ul').addClass('accordionPart').find('li div:nth-child(1)').addClass('qa_title').hover(function(){
		$(this).addClass('qa_title_on');
	}, function(){
		$(this).removeClass('qa_title_on');
	}).click(function(){
		// 當點到標題時，若答案是隱藏時則顯示它，同時隱藏其它已經展開的項目
		// 反之則隱藏
		var $qa_content = $(this).next('div.qa_content');
		if(!$qa_content.is(':visible')){
			$('#qaContent ul li div.qa_content:visible').slideUp();
		}
		$qa_content.slideToggle();
	}).siblings().addClass('qa_content').hide();
});

筆者還增加新的效果：當點擊某一項目時，會先把其它已經展開的項目給隱藏起來，保持一次只有一個是展開的。

範例瀏覽：
http://demonstration.abgne.tw/jquery/0018/0018_1.html
http://demonstration.abgne.tw/jquery/0018/0018_2.html

]]> http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html/feed 0 [jQ]FormToWizard http://abgne.tw/jquery/jquery-plugins/formtowizard.html http://abgne.tw/jquery/jquery-plugins/formtowizard.html#comments Sat, 06 Feb 2010 06:14:32 +0000 男丁格爾 http://abgne.tw/?p=2853 FormToWizard 就是一個能把一般表單轉換成精靈式表單的外掛套件。只要事先用 fieldset 來區分出欄位區塊就可以輕輕鬆鬆的無痛轉換囉]]>

常常申請或是註冊會員時都要填一堆落落長的表單資料，也時要填寫的欄位可能要捲好幾次捲軸才寫的話，筆者還沒填之前可能就準備按上一頁離開了。如果能把填資訊換成像是安裝軟體時的精靈方式，填完某一區塊後繼續下一步驟的話，也許能讓訪客能在不知不覺中填完呢。

FormToWizard 就是一個能把一般表單轉換成精靈式表單的外掛套件。只要事先用 fieldset 來區分出欄位區塊就可以輕輕鬆鬆的無痛轉換囉！

套件名稱：FormToWizard
套件版本：N/A
作者網站：http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
套件網址：N/A
發佈日期：2009-09-28
檔案大小：2.33 KB
檔案下載：formToWizard.js

參數說明：

?檢視原始碼 JavaScript
1
2
3

submitButton(選填)
描述： 送出鈕的 id，若有提供則會先隱藏改鈕, 待進行到最後一步驟時才顯示
預設值： ""

方法說明：

?檢視原始碼 JavaScript
1
2

// 把指定表單轉換成精靈式表單
$(...).formToWizard(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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<style type="text/css">
	#main { width:400px; border:solid 1px #b2b3b5; padding:20px; background-color:#f6f6f6;}
	fieldset { border: none; width:320px;}
	legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
	label { display:block; margin:15px 0 5px;}
	input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
	.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
	.prev:hover, .next:hover { background-color:#000; text-decoration:none;}
	.prev { float:left;}
	.next { float:right;}
	#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
	#steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
	#steps li span {font-size:11px; display:block;}
	#steps li.current { color:#000;}
</style>
<script type="text/javascript">
	$(function(){
		// 讓文字及密碼輸入框加大
		$('input[type=text], input[type=password]').css({
			width: 300,
			padding: 5,
			border: 'solid 1px #000'
		});
 
		$('#toWizard').one('click', function(){
			// 把 #SignupForm 轉換成精靈式表單
			// 並先隱藏 #SaveAccount 送出鈕
			$('#SignupForm').formToWizard({
				submitButton: 'SaveAccount'
			});
 
			return false;
		});
	});
</script>
 
<body>
	<p>
		<a href="#" id="toWizard">把表單轉換成精靈式表單</a>
	</p>
	<div id="main">
		<form id="SignupForm" action="">
			<fieldset>
				<legend>基本資訊</legend>
				<label for="Name">姓名</label>
				<input id="Name" type="text" />
				<label for="Email">電子信箱</label>
				<input id="Email" type="text" />
				<label for="Password">密碼</label>
				<input id="Password" type="password" />
			</fieldset>
			<fieldset>
				<legend>公司資訊</legend>
				<label for="CompanyName">公司名稱</label>
				<input id="CompanyName" type="text" />
				<label for="Website">公司網址</label>
				<input id="Website" type="text" />
				<label for="CompanyEmail">公司電子信箱</label>
				<input id="CompanyEmail" type="text" />
			</fieldset>
			<fieldset>
				<legend>信用卡帳單資訊</legend>
				<label for="NameOnCard">姓名</label>
				<input id="NameOnCard" type="text" />
				<label for="CardNumber">號碼</label>
				<input id="CardNumber" type="text" />
				<label for="CreditcardMonth">期限</label>
				<select id="CreditcardMonth">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				<select id="CreditcardYear">
					<option value="2010">2010</option>
					<option value="2011">2011</option>
					<option value="2012">2012</option>
					<option value="2013">2013</option>
					<option value="2014">2014</option>
					<option value="2015">2015</option>
					<option value="2016">2016</option>
					<option value="2017">2017</option>
					<option value="2018">2018</option>
					<option value="2019">2019</option>
				</select>
				<label for="Country">縣市</label>
				<select id="Country">
					<option value="c1">台北縣</option>
					<option value="c2">台北市</option>
					<option value="c3">桃園縣</option>
					<option value="c4">桃園市</option>
					<option value="c5">台南縣</option>
					<option value="c6">台南市</option>
				</select>
				<label for="Address1">地址</label>
				<input id="Address1" type="text" />
			</fieldset>
			<p>
				<input id="SaveAccount" type="button" value="Submit form" />
			</p>
		</form>
	</div>
</body>

附註：
範例中的 css 除了 #main 之外，其它都是 FormToWizard 會需要用到的。

範例瀏覽：
http://demonstration.abgne.tw/jquery/plugins/0077/0077.html

]]> http://abgne.tw/jquery/jquery-plugins/formtowizard.html/feed 0 [jQ]如何透過包含 Meta-Characters 的 ID 來取得元素？ http://abgne.tw/jquery/jquery-tips/jquery-select-element-by-id-contain-meta-characters.html http://abgne.tw/jquery/jquery-tips/jquery-select-element-by-id-contain-meta-characters.html#comments Mon, 01 Feb 2010 06:09:18 +0000 男丁格爾 http://abgne.tw/?p=2835 jQuery 有用到一些 Meta-CHaracters(元字符) 來當做選擇器解析使用，像是 # . ~ [] : = > 等等。當要透過 id 時要使用 #id，而要包含屬性時要用 [attr]]]> jQuery 有用到一些 Meta-CHaracters(元字符) 來當做選擇器解析使用，像是 # . ~ [] : = > 等等。當要透過 id 時要使用 #id，而要包含屬性時要用 [attr]。

假設我們有一段 HTML：

?檢視原始碼 HTML
1
2
3

<body>
	<div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div>
</body>

所以我們要指定 id 為 abgne 及有 tw 屬性的元素內容的話，可以這樣寫：

?檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：寫更少，做更多。
	alert($('#abgne[tw]').text());
});

如果....有個設計師或是程式設計師把 id 命名為 #abgne[tw] 的話：

?檢視原始碼 HTML
1
2
3
4
5

<body>
	<div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div>
 
	<div id="#abgne[tw]">jQuery：The Write Less, Do More.</div>
</body>

現在我們要取得 id 為 #abgne[tw] 的內容時，可能就有人想到，要用 id 則要在前面加上 #，所以就馬上寫成：

?檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：寫更少，做更多。
	alert($('##abgne[tw]').text());
});

實際執行過後會發現一樣是取到第一個 id 為 abgne 的內容。為什麼會這樣呢？因為 # 跟 [] 都是 jQuery 設定好的選擇器字元符號，如果直接寫的話，在 [] 中間的值就會被認為是要判斷屬性用的。

若我們要使用的選擇器中又包含其它 Meta-CHaracters(元字符) 的話，則要在這些字元前面加上兩個反斜線(\\)來當做跳脫字元(Escape Characters)使用，因此要取得 id 為 #abgne[tw] 的話，則要寫成：

?檢視原始碼 JavaScript
1
2
3
4

$(function() {
	// -> jQuery：The Write Less, Do More.
	alert($('#\\#abgne\\[tw\\]').text());
});

這樣就能正確的取到 #abgne[tw] 中的內容了。這邊整理出在 jQuery 中需要注意的 Meta-CHaracters(元字符) 清單：

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

#
.
[
]
(
)
&
,
+
*
~
'
:
"
!
^
$
=
>
|
/
;

雖然使用跳脫字元(Escape Characters)的方式可以解決問題，但建議還是只用單純的英數字符號來當做 id 名稱。

範例瀏覽：
http://demonstration.abgne.tw/jquery/tips/0005/0005.html

]]> http://abgne.tw/jquery/jquery-tips/jquery-select-element-by-id-contain-meta-characters.html/feed 0 五分農瀏覽器 0.1 http://abgne.tw/my-programes/facebook-fiveminutefarmbrowser-0-1.html http://abgne.tw/my-programes/facebook-fiveminutefarmbrowser-0-1.html#comments Sun, 31 Jan 2010 09:55:15 +0000 男丁格爾 http://abgne.tw/?p=2823 五分鐘農場可是元祖的農場遊戲，每種植物都是放大版的，讓玩家的農場看起來就是很熱鬧呢。且還有不定時的各種活動，讓玩家間的交流能更有趣]]> 聲明：此軟體為免費軟體，其它使用者的販賣行為跟本站(人)無關。
軟體名稱：五分農瀏覽器
版本編號：0.1
檔案大小：2.77MB
語言介面：繁體中文
官方網站：http://abgne.tw
預覽圖：

說明簡介：
五分鐘農場可是元祖的農場遊戲，每種植物都是放大版的，讓玩家的農場看起來就是很熱鬧呢。且還有不定時的各種活動，讓玩家間的交流能更有趣。

一樣為了讓一般使用者能上班時偷偷玩，所以筆者就做了一個簡單的瀏覽器程式能把開心農場的畫面配合視窗來縮放。但只要使用此瀏覽器的話，要大要小就依使用者自行來決定囉。

程式功能：
ver. 0.1
1.可自動縮放開心農場畫面。
2.把滑鼠移到視窗上方會有重整畫面及農場拍照的功能項目。
3.防老闆的隱藏/顯示熱鍵功能, 預設是 Home(可自訂)
4.新增可固定農場大小的選項，若你的視窗大小一定會小於 1024 X 738 時可勾選它。

熱鍵：
FaceBook = Alt + F
畫面重整 = Alt + R
農場拍照 = PrintScreen
顯示/隱藏選單 = F1
防老闆件 = Home

註：
因程式是用C#開發的，所以需要安裝 .Net Framework，載點如下：
Microsoft .NET Framework 2.0 Service Pack 1 (x86)
Microsoft .NET Framework 2.0 Service Pack 1 (x64)


ver. 0.1
XUN6 空間 | MF 空間 | miroko 空間
]]> http://abgne.tw/my-programes/facebook-fiveminutefarmbrowser-0-1.html/feed 19 開心農場瀏覽器 II 0.1 http://abgne.tw/my-programes/facebook-happybrowser-ii.html http://abgne.tw/my-programes/facebook-happybrowser-ii.html#comments Sat, 30 Jan 2010 03:27:00 +0000 男丁格爾 http://abgne.tw/?p=2818 開心農場可真說是 2009 年最火紅的遊戲了，同時也因此讓其它人知道有 Facebook 這樣的社群網站。開心農場三不五時就鬧線上農災，但是一堆人罵一堆人玩，現在也要推出新版介面(仿誰應該很明顯)]]> 聲明：此軟體為免費軟體，其它使用者的販賣行為跟本站(人)無關。
軟體名稱：開心農場瀏覽器
版本編號：0.1
檔案大小：3.01MB
語言介面：繁體中文
官方網站：http://abgne.tw
預覽圖：

說明簡介：
開心農場可真說是 2009 年最火紅的遊戲了，同時也因此讓其它人知道有 Facebook 這樣的社群網站。開心農場三不五時就鬧線上農災，但是一堆人罵一堆人玩，現在也要推出新版介面(仿誰應該很明顯)。

一樣為了讓一般使用者能上班時偷偷玩，所以筆者就做了一個簡單的瀏覽器程式能把開心農場的畫面配合視窗來縮放，遊戲基本預設是 760×650。但只要使用此瀏覽器的話，要大要小就依使用者自行來決定囉。

程式功能：
ver. 0.1
1.可自動縮放開心農場畫面。
2.把滑鼠移到視窗上方會有重整畫面及農場拍照的功能項目。
3.防老闆的隱藏/顯示熱鍵功能, 預設是 Home(可自訂)
4.新增可固定農場大小的選項，若你的視窗大小一定會小於 1024 X 738 時可勾選它。

熱鍵：
FaceBook = Alt + F
畫面重整 = Alt + R
農場拍照 = PrintScreen
顯示/隱藏選單 = F1
防老闆件 = Home

註：
因程式是用C#開發的，所以需要安裝 .Net Framework，載點如下：
Microsoft .NET Framework 2.0 Service Pack 1 (x86)
Microsoft .NET Framework 2.0 Service Pack 1 (x64)


ver. 0.1
XUN6 空間 | MF 空間 | miroko 空間
]]> http://abgne.tw/my-programes/facebook-happybrowser-ii.html/feed 48 jQuery 1.4 的第一個修正版 - jQuery 1.4.1 http://abgne.tw/jquery/jquery-resources/jquery-1-4-1-released.html http://abgne.tw/jquery/jquery-resources/jquery-1-4-1-released.html#comments Tue, 26 Jan 2010 07:18:43 +0000 男丁格爾 http://abgne.tw/?p=2800 1.4 版發佈不到 2 星期的今天(2010/01/25)，jQuery 官方釋出了 1.4.1 版來修正一些較為明顯的錯誤之外，同時還強化了 1.4 版新增的 API 功能]]>

離 1.4 版發佈不到 2 星期的今天(2010/01/25)，jQuery 官方釋出了 1.4.1 版來修正一些較為明顯的錯誤之外，同時還強化了 1.4 版新增的 API 功能。

jQuery 1.4.1 下載位置
正常版本：http://code.jquery.com/jquery-1.4.1.js
壓縮版本：http://code.jquery.com/jquery-1.4.1.min.js

除了 Bug 修正之外，並就 1.4 的 API 強化了以下部份：

1..live("focus") 及 .live("blur") 現在可正常使用了，它會對應到 .live("focusin") 及 .live("focusout")。
2..live("hover") 現在也可以使用了，它會對應到 .live("mouseenter mouseleave")。
3.現在允許使用 live 來綁定多個不同的事件了。
4.使用 .die() 若沒指定事件參數的話，則會移除全部透過 .live() 綁定的事件。
5..height(function) 及 .width(function) 也支援接受額外函式來進行更進階的處理。
6.jQuery.parseJSON(json) 可以把 JSON 字串轉換成 JavaScript 物件。
7.jQuery.error(message) 可用來丟出錯誤使用，可讓外掛開發者用來提供使用時的一些訊息。

更多詳細的更新內容可以在 jQuery 1.4.1 Released 中看到清楚的說明。

]]> http://abgne.tw/jquery/jquery-resources/jquery-1-4-1-released.html/feed 4 [jQ]用 jQuery 做廣告 - 仿 Yahoo 標籤式垂直廣告輪播 http://abgne.tw/jquery/apply-jquery/jquery-yahoo-tag-vertical-ad.html http://abgne.tw/jquery/apply-jquery/jquery-yahoo-tag-vertical-ad.html#comments Fri, 22 Jan 2010 06:48:10 +0000 男丁格爾 http://abgne.tw/?p=2763 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果，例如：超級商城的流行館或是時尚]]> 現在的廣告效果真的都是越做越有趣了，像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果，例如：超級商城的流行館或是時尚館



這塊 Flash 廣告的基本效果是：當滑鼠移到某一項目時，除了選項的背景樣式會改變之外，還會把左邊的圖片捲動到相對應的廣告。同時若沒把滑鼠移到選項時，它會自動的每隔 N 秒輪播下一個廣告。

從畫面看來，我們至少需要一組廣告圖片及相對應數量的一組選項。這邊筆者都用 ul 來做廣告圖片及選項的區塊：

?檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
	<div id="adblock">
		<ul class="showbox">
			<li><a href="http://www.google.com/phone"><img src="images/nexus_one.gif" title="Nexus One" /></a></li>
			<li><a href="http://www.apple.com/tw/iphone/why-iphone/"><img src="images/iphone.gif" title="iPhone 3GS" /></a></li>
			<li><a href="http://www.htc.com/tw/product/hero/overview.html"><img src="images/hero.gif" title="HTC Hero" /></a></li>
			<li><a href="http://www.htc.com/tw/product/hd2/overview.html"><img src="images/hd2.gif" title="HTC HD2" /></a></li>
		</ul>
		<ul class="link">
			<li><a href="#">Nexus One</a></li>
			<li><a href="#">iPhone 3GS</a></li>
			<li><a href="#">HTC Hero</a></li>
			<li><a href="#">HTC HD2</a></li>
		</ul>
	</div>
</body>

有了兩組 ul 之後，接著要讓他們一個在左，一個在右的併排在一起：

?檢視原始碼 CSS
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

a img {
	border: none;
	vertical-align: middle;
}
#adblock {
	overflow: hidden;
	width: 920px;	/* 廣告圖片的寬 + 選單圖片最大的寬 */
	height: 220px;	/* 廣告圖片的高 */
	border: 1px solid #ccc;
	position: relative;
}
#adblock ul, #adblock li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#adblock ul.showbox, #adblock ul.link {
	position: absolute;
}
#adblock ul.showbox li a {
	display: block;
	height: 220px;	/* 廣告圖片的高 */
}
#adblock ul.link {
	right: 0;
}
#adblock ul.link li a {
	display: block;
	width: 180px;	/* 滑鼠未移入時的選單圖片寬 */
	height: 55px;	/* 選單圖片的高 */
	position: absolute;
	text-indent:20px;
	line-height: 55px;
	background-color: #ccc;
	right: 0;
	background: url(images/menu.off.gif);
}
#adblock ul.link li a.selected {
	width: 200px;	/* 滑鼠移入時的選單圖片寬 */
	text-indent: 40px;
	background: url(images/menu.on.gif);
}

筆者為了讓選項也能像Yahoo!奇摩的一樣能靠右對齊且左邊是突出去的，因此就讓選項的 position 設成 absolute 之外，還讓它們的 right 都是歸 0 靠右。但這樣選項卻因為沒設定 top 而推擠在一起了：



雖然可以一張一張的設定 top 位置，但筆者實在是太懶了，因此就把排位置的動作都交給 jQuery 來代勞：

?檢視原始碼 JavaScript
1
2
3
4
5
6

$(function(){
	$('#adblock ul.link li a').each(function(i){
		// 把選單排好位置
		$(this).css('top', i * 55);
	});
});



嘿~這樣是不是方便很多了呢？！接下來就讓我們一口氣來完成接下來的事件及動作吧：

?檢視原始碼 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

$(function(){
	// 大廣告圖片的高度及動畫時間
	var adHeight = 220,
		animateSpeed = 400;
	$('#adblock ul.link li a').each(function(i){
		// 把選單排好位置
		$(this).css('top', i * 55);
	}).mouseover(function(){
		var $this = $(this),
			// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
			no = $this.parent().index();
 
		// 先移除有 .selected 的超連結的樣式
		$('#adblock ul.link li a.selected').removeClass('selected');
		// 再把目前點擊到的超連結加上 .selected
		$this.addClass('selected');
 
		// 把 ul.showbox 的 top 移到相對應的高度
		$('#adblock ul.showbox').stop().animate({
			top: adHeight * no * -1
		}, animateSpeed);
	}).focus(function(){
		$(this).blur();
	}).eq(0).mouseover();
});

有沒有發現到咱們的程式+註解都還比 CSS 還要少咧？其實要寫出一個好的效果，除了程式之外，CSS 所扮演的角色也是有一定的份量的唷！若沒問題的話，預覽時可以看到不輸給 Flash 的廣告效果：



只要把滑鼠移到右邊的選項時，左邊的圖片就會自動捲動到相對應的廣告。若要讓它能自動輪播的話，則得再加上一個計時器而控制用的函式：

?檢視原始碼 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
54
55
56
57
58
59

$(function(){
	// 大廣告圖片的高度及動畫時間
	// 計時器及輪播時間(毫秒)
	var adHeight = 220,
		animateSpeed = 400,
		timer,
		speed = 3500;
 
	function showNext(){
		// 找出目前是第幾個選項被展示出來(jQuery 1.4)
		var $li = $('#adblock ul.link li'),
			no = $li.has('a.selected').index();
 
		// 計算出下一個要展示的廣告選項
		no = (no + 1) % $li.length;
 
		// 觸發指定選項的 mouseover 事件
		$li.eq(no).children('a').mouseover();
 
		// 再啟動計時器
		timer = setTimeout(showNext, speed);
	}
 
	$('#adblock ul.link li a').each(function(i){
		$(this).css('top', i * 55);
	}).hover(function(){
		var $this = $(this),
			// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
			no = $this.parent().index();
 
		// 先移除有 .selected 的超連結的樣式
		$('#adblock ul.link li a.selected').removeClass('selected');
		// 再把目前點擊到的超連結加上 .selected
		$this.addClass('selected');
 
		// 把 ul.showbox 的 top 移到相對應的高度
		$('#adblock ul.showbox').stop().animate({
			top: adHeight * no * -1
		}, animateSpeed);
 
		// 移除計時器
		clearTimeout(timer);
	}, function(){
		// 啟動計時器
		timer = setTimeout(showNext, speed);
	}).focus(function(){
		$(this).blur();
	}).eq(0).addClass('selected');
 
	// 當滑鼠移到廣告上時停止計時器..移出後啟動計時器
	$('#adblock ul.showbox li').hover(function(){
		clearTimeout(timer);
	}, function(){
		timer = setTimeout(showNext, speed);
	});
 
	// 啟動計時器
	timer = setTimeout(showNext, speed);
});

另外要注意的是，此範例中 .has() 及 .index() 的用法是 jQuery 1.4 才支援的，因此要記的引用 1.4 版才行喔。

範例瀏覽：
http://demonstration.abgne.tw/jquery/0017/0017_1.html
http://demonstration.abgne.tw/jquery/0017/0017_2.html

]]> http://abgne.tw/jquery/apply-jquery/jquery-yahoo-tag-vertical-ad.html/feed 16