mootools
I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class.
一年多以前，我发布了我的第一个MooTools课程。 这是一种非常简单的斑马表方法，是编写一流的一流课程。 我花了一些时间来更新和改进课程。
View Demo
查看演示
Download
下载
XHTML (The XHTML)
<table class="list-table" cellpadding="0" cellspacing="0">
<tr>
<th><b>Award</b></th>
<th><b>Actor</b></th>
<th><b>Film</b></th>
</tr>
<tr>
<td>Actor In A Leading Role</td>
<td>Daniel Day-Lewis</td>
<td>There Will Be Blood</td>
</tr>
<tr>
<td>Actress In A Leading Role</td>
<td>Marion Cotillard</td>
<td>La Vie en Rose</td>
</tr>
<tr>
<td>Actor In A Supporting Role</td>
<td>Javier Bardem</td>
<td>No Country For Old Men</td>
</tr>
<tr>
<td>Actress In A Supporting Role</td>
<td>Tilda Swinton</td>
<td>Michael Clayton</td>
</tr>
<tr>
<td>Directing</td>
<td>Joel Coen and Ethan Coen</td>
<td>No Country For Old Men</td>
</tr>
</table>
You may have as many tables as you want.
您可以根据需要拥有任意多个表。
CSS (The CSS)
.highlight { background:#d5fcdc; }
.even { background:#fff; }
.mo { background:#e3f1fb; }
.odd { background:#eee; }
.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 above are the classes are configurable using the plugin's options.
以上是可使用插件选项配置的类。
MooTools JavaScript (The MooTools JavaScript)
var ZebraTable = new Class({
//implements
Implements: [Options,Events],
//options
options: {
elements: 'table.list-table',
cssEven: 'even',
cssOdd: 'odd',
cssHighlight: 'highlight',
cssMouseEnter: 'mo'
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
//zebra-ize!
$$(this.options.elements).each(function(table) {
this.zebraize(table);
},this);
},
//a method that does whatever you want
zebraize: function(table) {
//for every row in this table...
table.getElements('tr').each(function(tr,i) {
//check to see if the row has th's
//if so, leave it alone
//if not, move on
if(tr.getFirst().get('tag') != 'th') {
//set the class for this based on odd/even
var options = this.options, klass = i % 2 ? options.cssEven : options.cssOdd;
//start the events!
tr.addClass(klass).addEvents({
//mouseenter
mouseenter: function () {
if(!tr.hasClass(options.cssHighlight)) tr.addClass(options.cssMouseEnter).removeClass(klass);
},
//mouseleave
mouseleave: function () {
if(!tr.hasClass(options.cssHighlight)) tr.removeClass(options.cssMouseEnter).addClass(klass);
},
//click
click: function() {
//if it is currently not highlighted
if(!tr.hasClass(options.cssHighlight))
tr.removeClass(options.cssMouseEnter).addClass(options.cssHighlight);
else
tr.addClass(options.cssMouseEnter).removeClass(options.cssHighlight);
}
});
}
},this);
}
});
/* do it! */
window.addEvent('domready', function() {
var zebraTables = new ZebraTable();
});
The improvements to this class include:
对此类的改进包括：
General MooTools style consistency
通用MooTools样式的一致性 CSS class flexibility
CSS类的灵活性 Checks to make sure the table heading rows (rows with "th") are untouched
检查以确保表格标题行(带有“ th”的行)未被更改 You may use the zebraize method after class initialization
您可以在类初始化后使用zebraize方法 Table highlighting has been separated
表格突出显示已分开
The class is still very basic. This plugin does not contain sorting functionality nor was it designed to.
该课还是很基础的。 此插件不包含排序功能，也不是专为此功能而设计的。
View Demo
查看演示
Download
下载
Need basic table highlighting? Download it!
需要基本的表格突出显示吗？ 下载它！
翻译自: https://davidwalsh.name/mootools-zebra-table-plugin
mootools
相关资源：jdk-8u281-windows-x64.exe
