Plugin MooTools Zebra Tables

Tabulková data mohou být často nudná, ale nemusí tak vypadat! S malou třídou MooTools mohu tabulková data extrémně snadno číst implementací tabulek „zebra“ – tabulek se střídajícími se barvami pozadí řádků.

Zobrazit ukázku

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

Výše uvedené CSS je velmi základní. Styl tagu jsem upravil tak, aby vyčníval z řádků tabulky. V mé tabulce zebry jsou čtyři stavy řádků:zvýrazněné (nebo „kliknutí na“), pravidelný sudý a lichý a stav po přejetí myší – ty jsou reprezentovány „sudými“, „mo“, „zvýrazněnými“ a „ liché“ třídy. K jsem přidal výplň a spodní okraj pro prezentaci.

XHTML

<table class="zebra" cellpadding="0" cellspacing="0">
	<tr>
		<th>Award</th>
		<th>Actor</th>
		<th>Film</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>
	<tr>
		<td>Writing</td>
		<td>Diablo Cody</td>
		<td>Juno</td>
	</tr>
</table>

Výše uvedená tabulka je jednoduchá, standardní tabulka. Jediným detailem, který je třeba poznamenat, je, že tato tabulka má třídu "zebra", což MooTools signalizuje, že by tato tabulka měla být zebra.

Třída JavaScript

/* 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');
				}
			});

		});
	}
});

Třída přijímá jeden parametr, což je třída přidělená tabulkám, které by měly být zebra-ized. Po inicializaci třída cyklicky prochází každý řádek tabulky. Během opakování řádku je řádku přidělena jeho lichá nebo sudá třída CSS a do řádku je přidán posluchač, který řádek zvýrazní při přejetí myší. Výše uvedený JavaScript lze umístit do externího souboru JavaScript.

Implementace JavaScriptu

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

Chcete-li implementovat ZebraTables, vše, co musíte udělat, je přidat výše uvedený kód na danou stránku.

Zobrazit ukázku

Máte nějaké návrhy na mé zebří stoly? Dejte mi vědět!