男丁格爾's 脫殼玩

沒錯!只要 500 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jquery_alternate_1_1

雖然 jQuery 已經有很方便好用的 : odd 及 :even 基本的間隔選擇器可用，不過 jQuery.Alternate 套件則把這樣的功能再包裝成更簡單的套件，只要設定一下奇偶間隔所要套用的樣式就可以來使用囉。

套件名稱：jQuery.Alternate
套件版本：1.1
作者網站：http://alternate.briancampbell.name/
套件網址：http://plugins.jquery.com/project/alternate
發佈日期：2009-02-19
檔案大小：1.80 KB
檔案下載：jquery.alternate.js

參數說明：

檢視原始碼 JavaScript

odd(選填)
描述： 奇數行所要套用的樣式
預設值： 'odd'
 
even(選填)
描述： 偶數行所要套用的樣式
預設值： 'even'
 
hover(選填)
描述： 是否加上 hover 事件；如果啟用則會套用 .hover 樣式
預設值： false
 
fnClick(選填)
描述： 當點擊時所觸發的動作
預設值： 無

方法說明：

檢視原始碼 JavaScript

// 讓指定的元素有間隔效果
$(selector).alternate(options, fnClick);
 
// 修改預設的參數
$.alternate.defaults = options;

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alternate.js"></script>
<style type="text/css">
	ul {
		list-style: none;
	}
	table, ul {
		width: 48%;
		background: #fff;
		border-width: 1px;
		border-style: solid;
		border-color: #f5f5f5 #ccc #ccc #f5f5f5;
		margin: 10px 0 0 0;
		padding: 0;
	}
	.off {
		background-color: red;
	}
	.on {
		background-color: blue;
	}
	#table_a tbody tr.hover {
		color: yellow;
		cursor: crosshair;
	}
	#list_a li.hover {
		color: green;
		font-weight: bold;
		cursor: crosshair;
	}
	.selected {
		font-style: italic;
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 #table_a tbody tr 每隔一行都用特定的樣式
		// 當點擊時也會套用 .selected
		$("#table_a tbody tr").alternate({
			odd: 'off',
			even: 'on',
			hover: true
		}, function(){
			$(this).toggleClass('selected');
		});
 
		// 移除間隔的樣式效果
		$("#list_a li").alternate({
			odd: '',
			even: '',
			hover: true
		});
	});
</script>
 
<body>
	<table id="table_a">
		<thead>
			<tr>
				<th>標題</th>
				<th>標題</th>
				<th>標題</th>
			</tr>
		</thead>
		<tbody>
 
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
			<tr>
				<td>cell</td>
 
				<td>cell</td>
				<td>cell</td>
			</tr>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
 
			</tr>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
		</tbody>
	</table>
 
	<ul id="list_a">
		<li>我是選項</li>
		<li>我是選項</li>
		<li>我是選項</li>
		<li>我是選項</li>
	</ul>
</body>