斑马纹的表格效果,基于MooTools

By Rainbow on // JavaScript // 3819 Views+ // (0) Comments

说起“斑马纹表格”，我们还是追究一下，历史根源吧！

自从CSS成为热门以来，表格(table)愈加少见了。可以说明确直白的网页标记和CSS代码已经取代了往日的表格作为页面布局方法。表格只有回退到它们最初的角色：用来展现以记录（行）和属性(列)结构存储的数据元素。

表格元素相对于其它页面元素而言，表格的优势就在于仅占用很小的面积就清楚地展现比它们更为丰富的内容，因此我们不断尝试使得表格变得更美观，同时有利于用户体验和尽可能被理解的形式。

然而，“斑马纹” 效果，一直是流行的样式 。表格行的颜色产生交替，这种颜色交替通常被称作“斑马纹”。

CSS来实现的斑马纹表格

The 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

body {
background:#EFEFEF none repeat scroll 0 0;
color:#000000;
font-family:Helvetica,Arial,sans-serif;
text-align:center;
}
#page {
background:#FFFFFF none repeat scroll 0 0;
margin:0 auto;
padding:2em;
text-align:left;
width:600px;
}
/*表格样式*/
table {
border:1px solid #000000;
border-collapse:collapse;
caption-side:top;
width:100%;
}
th, td {
border:1px solid #000000;
padding:0.3em;
text-align:left;
vertical-align:top;
width:25%;
}
caption {
background:#000000 none repeat scroll 0 0;
color:#FFFFFF;
padding:0.3em;
}
th {
background:#CCCCCC none repeat scroll 0 0;
}
td {
background:#F4F4F4 none repeat scroll 0 0;
}
/*控制列宽*/  
.elements {
width:30%;
}
.tag {
width:15%;
}
.purpose {
width:55%;
}
/*斑马纹类*/
.odd td {
background:#FFF none repeat scroll 0 0;
}
.even td {
background:#FFC none repeat scroll 0 0;	
}

The HTML

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

<div id="page">
  <table width="100%" border="0">
    <caption>
      Common table elements
    </caption>
    <tbody><tr>
      <th scope="col" class="elements">Element</th>
      <th scope="col" class="tag">Tag</th>
      <th scope="col" class="purpose">Purpose</th>
    </tr>
    <tr class="odd">
      <td>table</td>
      <td>&lt;table&gt;</td>
      <td>Encloses a table </td>
    </tr>
    <tr class="even">
      <td>table row </td>
      <td>&lt;tr&gt;</td>
      <td>Encloses a row of table cells </td>
    </tr>
    <tr class="odd">
      <td>table header cell </td>
      <td>&lt;th&gt;</td>
      <td>Sets a heading for a row or column </td>
    </tr>
    <tr class="even">
      <td>table data cell </td>
      <td>&lt;td&gt;</td>
      <td>Contains data </td>
    </tr>
    <tr class="odd">
      <td>caption</td>
      <td>&lt;caption&gt;</td>
      <td>Sets a caption for the table </td>
    </tr>
 
  </tbody>
 </table>
</div>

tables-example-zebra-classes

演示：tables-example-zebra-classes.html

我们遇到的问题：

问题#1:

人力消耗

无论是在网络上通过CSS来定义页面，还是在诸如Adobe InDesign这样的程序中定义界面，我们采用样式表的目的都是为了在一个文档内控制其内部所有元素的可视化属性。CSS触发器能够使你单独定哪个页面元素应用什么样的外观形式，而上面的方法却需要作者自己至少手动地将至少半数的类名（奇数类或者偶数类）添加至表格的每一行元素上。如果表只包含为数不多的几行元素的话，这当然无足轻重，一旦表中的数据有成千上万行的时候，这样的复制粘贴工作就会显得迂腐不堪。

问题#2:

行的连续性

当你在创建页面的时候，在表内将行来回挪动，极有可能弄到后来你会晕到将连续两行奇数行或者偶数行放置在一起，这将会导致你美丽的条纹被分裂成一堆糟糕的随机行。在一张表内如果有许多行的话，想查找并且纠正某一行的属性是令人沮丧的。

这个时候，我们绞尽脑汁的想，是否还有更多的解决方案，突然之间，我们想起了CSS3，我们看到了希望，CSS3中的

结构性伪类： E:nth-child(n)可以给我解决我们遇到的问题。

1
2
3
4
5
6

tbody tr:nth-child(odd) {
	background: #FFF;
} 
tbody tr:nth-child(even) {
	background: #FFC;
}

E:nth-child(n)目前支持的浏览器有：

类型 Internet Explorer Firefox Chrome Opera Safari
版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4Public beta
(×)IE8 (√)Firefox 3.5

为什么在希望中又带着些绝望。该死的IE 。

上述奇偶定义方法只是纯粹采用了CSS定义。现在是时候收起这个榔头(CSS)，尝试我们身上所带另外的工具了: JavaScript 和DOM。

我这里有一个例子，先睹为快。

iTunes Stripes 表格：http://www.alistapart.com/d/stripedtables/example.html

不过我还是觉得蛮复杂的。

我想一想，哎，市面上比较流行的JavaScript库中，不是提供了 CSS Selectors 的方法，并且兼容所有主流的浏览器。

jQuery库最为强大，不过我还是偏爱MooTools库， 所以下面的实例就用MooTools 了。

用MooTools实现一个简单的斑马纹表格

The MooTools JavaScript

1
2
3
4

window.addEvent('domready', function() { 
    $$('table tr:nth-child(odd)').addClass('odd');	
    $$('table tr:nth-child(even)').addClass('even');	
});

鼠标经过，单行高亮.

The CSS

1
2

tr.out { background-color: coral;}
tr.over { background-color: #fff;}

The MooTools JavaScript

1
2
3
4
5
6
7
8

$$('table','tr').addEvents({
	'mouseover': function(){
		this.setProperty('class','out');		
	},
	'mouseout':function(){
	    this.setProperty('class','over');
	}		
});

强大的MooTools ZebraTable Class(隔行变色，单行高亮)

The CSS

1
2
3
4

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

The MooTools Script

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

/* classes */
var ZebraTable = 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);
				}
				//clock on
				else
				{
					el.removeClass(_class).removeClass('mo').addClass('highlight');
				}
			});
 
		});
     }
});
 
/* do it! */
window.addEvent('domready', function() { 
	var zebraTables = new ZebraTable('list-table');
});

演示：MooTools-ZebraTable-Class

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计