mootools_MooTools Zebra Table插件

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:

对此类的改进包括：

1. General MooTools style consistency
   通用MooTools样式的一致性
2. CSS class flexibility
   CSS类的灵活性
3. Checks to make sure the table heading rows (rows with "th") are untouched
   检查以确保表格标题行(带有“ th”的行)未被更改
4. You may use the zebraize method after class initialization
   您可以在类初始化后使用zebraize方法
5. 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