logo

Plugin MooTools Zebra Table

Před více než rokem jsem vydal svou první třídu MooTools. Byl to opravdu minimalistický přístup k zebřím stolům a psaní bylo skvělé. Trvalo mi nějaký čas na aktualizaci a vylepšení třídy.

Zobrazit demo ke stažení

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>

Můžete mít tolik stolů, kolik chcete.

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; }

Výše uvedené třídy jsou konfigurovatelné pomocí možností pluginu.

JavaScript MooTools

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();
});

Mezi vylepšení této třídy patří:

  1. Obecná konzistence stylu MooTools
  2. Flexibilita třídy CSS
  3. Zkontroluje, zda nejsou dotčeny řádky záhlaví tabulky (řádky s "th")
  4. Po inicializaci třídy můžete použít metodu zebraize
  5. Zvýraznění tabulky bylo odděleno

Třída je stále velmi základní. Tento plugin neobsahuje funkci řazení a ani k tomu nebyl navržen.

Zobrazit demo ke stažení

Potřebujete základní zvýraznění tabulky? Stáhněte si to!