mootools_MooTools Zebra Tables插件-白红宇

mootools

Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.

表格数据有时可能很无聊，但不必那样看！使用小型MooTools类，我可以通过实现“斑马”表(具有交替的行背景色的表)来使表格数据非常易于阅读。

CSS (The CSS)

.highlight		{ background:#d5fcdc; }.even			{ background:#fff; }.mo			{ background:#e3f1fb; }.odd			{ background:#eee; }.zebra th		{ padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }.zebra td		{ padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }

The above CSS is extremely basic. I've styled the <TH> tag so that it stands out from table rows. There are four states of rows in my zebra table: highlighted (or "clicked on"), regular even and odd, and a mouseover state -- these are represented by the "even", "mo", "highlight", and "odd" classes. I've added padding and a bottom border to the <TD>'s for presentation.

上面CSS非常基础。我已经设置了<TH>标记的样式，以使其在表行中脱颖而出。斑马线表中有四种行状态：突出显示(或“单击”)，规则的偶数和奇数以及鼠标悬停状态-这些状态分别由“偶数”，“ mo”，“突出显示”和“奇数”类。我在<TD>的演示文稿中添加了填充和底部边框。

XHTML (The XHTML)


    
	           		       Award 		       Actor 		       Film 	      
	      		       Actor In A Leading Role 		       Daniel Day-Lewis 		       There Will Be Blood 	      
	      		       Actress In A Leading Role 		       Marion Cotillard 		       La Vie en Rose 	      
	      		       Actor In A Supporting Role 		       Javier Bardem 		       No Country For Old Men 	      
	      		       Actress In A Supporting Role 		       Tilda Swinton 		       Michael Clayton 	      
	      		       Directing 		       Joel Coen and Ethan Coen 		       No Country For Old Men 	      
	      		       Writing 		       Diablo Cody 		       Juno

Award	Actor	Film
Actor In A Leading Role	Daniel Day-Lewis	There Will Be Blood
Actress In A Leading Role	Marion Cotillard	La Vie en Rose
Actor In A Supporting Role	Javier Bardem	No Country For Old Men
Actress In A Supporting Role	Tilda Swinton	Michael Clayton
Directing	Joel Coen and Ethan Coen	No Country For Old Men
Writing	Diablo Cody	Juno

The above table is a simple, standard table. The only detail of note is that this table is given the "zebra" class, which signals to MooTools that this table should be zebra-ized.

上表是一个简单的标准表。唯一需要注意的细节是该表被赋予了“斑马”类，该类向MooTools发出信号，该表应该被斑马化。

JavaScript类 (The JavaScript Class)

/* classes */var ZebraTables = new Class({	//initialization	initialize: function(table_class) {		//add table shading		$$('table.' + table_class + ' tr').each(function(el,i) {			//do regular shading			var _class = i % 2 ? 'even' : 'odd'; el.addClass(_class);			//do mouseover			el.addEvent('mouseenter',function() { if(!el.hasClass('highlight')) { el.addClass('mo').removeClass(_class); } });			//do mouseout			el.addEvent('mouseleave',function() { if(!el.hasClass('highlight')) { el.removeClass('mo').addClass(_class); } });			//do click			el.addEvent('click',function() {				//click off				if(el.hasClass('highlight'))				{					el.removeClass('highlight').addClass(_class);				}				//click on				else				{					el.removeClass(_class).removeClass('mo').addClass('highlight');				}			});		});	}});

The class accepts one parameter, which is the class given to tables that should be Zebra-ized. Upon initialization, the class cycles through each table row. During the row looping, the row is given its odd or even CSS class, and a listener is added to the row to highlight the row upon mouseover. The above JavaScript could be placed into an .

该类接受一个参数，这是给应该Zebra化的表的类。初始化后，该类在每个表行中循环。在行循环期间，该行被赋予其奇数或偶数CSS类，并且在该行上添加了一个侦听器以在鼠标悬停时突出显示该行。上面JavaScript可以放在一个。

JavaScript实现 (The JavaScript Implementation)

/* do it! */window.addEvent('domready', function() {	var zTables = new ZebraTables('zebra');});

To implement ZebraTables, all you need to do is add the above code to any given page.

要实现ZebraTables，您需要做的就是将上述代码添加到任何给定的页面中。

Do you have any suggestions for my zebra tables? Let me know!

您对我的斑马桌有什么建议吗？让我知道！

翻译自:

mootools