Home » jQuery 外掛

[jQ]Colorize 2.0

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



基本的表格也許靠 CSS 能做到滑入變色的效果，但無法做到點選變色的效果。更別說是要能做到交叉滑入或交叉點選的效果了Colorize 是一個很有趣的表格外掛套件。它能把表格加上各種的突顯效果。不管是隔行要變色或是滑鼠滑入及點選都能自訂。

套件名稱：Colorize
套件版本：2.0
作者網站：http://franca.exofire.net/jq/colorize
套件網址：http://plugins.jquery.com/project/Colorize
發佈日期：2009-09-15
檔案大小：9.67 KB
檔案下載：jquery.colorize-2.0.0.js

參數說明：

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

altColor(選填)
描述： 偶數列的背景顏色：若不需要可以填入 'none' 或是 ''
預設值： '#ECF6FC'
 
bgColor(選填)
描述： 奇數列的背景顏色
預設值： '#fff'
 
hoverColor(選填)
描述： 當某列或行被滑鼠移入時的背景顏色
預設值： '#BCD4EC'
 
hoverClass(選填)
描述： 當某列或行被滑鼠移入時所要套用的 class
預設值： ''
 
hiliteColor(選填)
描述： 當某列或行被點擊時的背景顏色
預設值： 'yellow'
 
hiliteClass(選填)
描述： 當某列或行被點擊時所要套用的 class
預設值： ''
 
oneClick(選填)
描述： 是否允許點選多列或行
預設值： false
 
hover(選填)
描述： 設定當滑鼠移入到某列或行時的效果：row 表示該列會被突顯、column 表示該行會被突顯、cross 表示該列及行都會被突顯
預設值： 'row'
 
click(選填)
描述： 設定當滑鼠點擊某列或行時的效果：row 表示該列會被選取、column 表示該行會被選取、cross 表示該列及行都會被選取
預設值： 'row'
 
banColumns(選填)
描述： 設定那些行點擊無效；最後一行可以用 'last' 來表示
預設值： []
 
banRows(選填)
描述： 設定那些列點擊無效
預設值： []
 
banDataClick(選填)
描述： 若設為 true 時則只有表頭才有點選效果
預設值： false
 
ignoreHeaders(選填)
描述： 若設為 false 時則不會把表頭加入隔行變色的計算中
預設值： true
 
nested(選填)
描述： 若設為 true 時則會連同表格內的巢狀表格也進行隔行變色的效果
預設值： false

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定表格轉換成 colorize 效果
$(selector).colorize(params);

使用範例：

檢視原始碼 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.colorize-2.0.0.js"></script>
<style type="text/css">
	table, tr, td, th {
		border-style:solid;
		border-width:1px;
		border-color:#C6C3C6;
		border-collapse:collapse;
		margin-bottom: 20px;
	}
	td, th {padding:5px 5px;text-align:right;}
</style>
<script type="text/javascript">
	$(function(){
		$("#tbl1").colorize();
 
		// 限制第 2, 3 欄點選無效
		// 及最多只能有一列被點選
		// 並加上滑鼠移入及點選時的交叉效果
		$("#tbl2").colorize({
			banColumns: [1,2], 
			oneClick: true,
			hover: 'cross',
			click: 'cross'
		});
	});
</script>
 
<body>
	<table id='tbl1'> 
		<tr> 
			<th nowrap>project_number</th> 
			<th nowrap>cost_planned</th> 
			<th nowrap>cost_actual</th> 
			<th nowrap>computed</th> 
			<th nowrap>sch_plan</th> 
			<th nowrap>sch_actual</th>
		</tr> 
		<tr> 
			<td>&nbsp;0101</td> 
			<td>&nbsp;10</td> 
			<td>&nbsp;20</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;70</td> 
			<td>&nbsp;20</td>
		</tr> 
		<tr> 
			<td>&nbsp;0102</td> 
			<td>&nbsp;12</td> 
			<td>&nbsp;34</td> 
			<td>&nbsp;55</td> 
			<td>&nbsp;555</td> 
			<td>&nbsp;55</td>
		</tr> 
		<tr> 
			<td>&nbsp;0104</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td>
		</tr> 
		<tr> 
			<td>&nbsp;0149</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0150</td> 
			<td>&nbsp;310000</td> 
			<td>&nbsp;310000</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;3000</td> 
			<td>&nbsp;2923</td>
		</tr> 
		<tr> 
			<td>&nbsp;0151</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td>
		</tr> 
		<tr> 
			<td>&nbsp;0152</td> 
			<td>&nbsp;305250</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;-1</td> 
			<td>&nbsp;2493</td> 
			<td>&nbsp;2056</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0153</td> 
			<td>&nbsp;764800</td> 
			<td>&nbsp;719107</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;6078</td> 
			<td>&nbsp;5751</td> 
		</tr> 
	</table>
 
 
	<table id='tbl2'> 
		<tr> 
			<th nowrap>project_number</th> 
			<th nowrap>cost_planned</th> 
			<th nowrap>cost_actual</th> 
			<th nowrap>computed</th> 
			<th nowrap>sch_plan</th> 
			<th nowrap>sch_actual</th> 
			<th nowrap>effort_plan</th> 
			<th nowrap>effort_actual</th> 
			<th nowrap>scope_plan</th> 
			<th nowrap>scope_act</th> 
		</tr> 
		<tr> 
			<td>&nbsp;0101</td> 
			<td>&nbsp;10</td> 
			<td>&nbsp;20</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;70</td> 
			<td>&nbsp;20</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;0</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0102</td> 
			<td>&nbsp;12</td> 
			<td>&nbsp;34</td> 
			<td>&nbsp;55</td> 
			<td>&nbsp;555</td> 
			<td>&nbsp;55</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0104</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0149</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0150</td> 
			<td>&nbsp;310000</td> 
			<td>&nbsp;310000</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;3000</td> 
			<td>&nbsp;2923</td> 
			<td>&nbsp;400</td> 
			<td>&nbsp;391</td> 
			<td>&nbsp;219</td> 
			<td>&nbsp;219</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0151</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
			<td>&nbsp;</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0152</td> 
			<td>&nbsp;305250</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;-1</td> 
			<td>&nbsp;2493</td> 
			<td>&nbsp;2056</td> 
			<td>&nbsp;121</td> 
			<td>&nbsp;121</td> 
			<td>&nbsp;14</td> 
			<td>&nbsp;14</td> 
		</tr> 
		<tr> 
			<td>&nbsp;0153</td> 
			<td>&nbsp;764800</td> 
			<td>&nbsp;719107</td> 
			<td>&nbsp;0</td> 
			<td>&nbsp;6078</td> 
			<td>&nbsp;5751</td> 
			<td>&nbsp;209</td> 
			<td>&nbsp;225</td> 
			<td>&nbsp;14</td> 
			<td>&nbsp;18</td> 
		</tr> 
	</table>
</body>
範例 1

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

2 筆針對 [jQ]Colorize 2.0 的迴響

發表迴響