iPhone Click Effect pomocí MooTools nebo jQuery

Jedna věc, kterou miluji na Safari na iPhonu, je, že Safari poskytuje efekt ztmaveného pozadí, když kliknete na odkaz. Je to ten nejjemnější detail, ale jen vynucuje, než se akce odehrává. Tak proč to neimplementovat na jakoukoli stránku? Můžeme to snadno udělat pomocí MooTools nebo jQuery.

CSS

.clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

Styl, jak si přejete!

JavaScript MooTools

window.addEvent('domready',function() {
	var lynx = $$('a');
	lynx.addEvent('click',function(e) {
		lynx.removeClass('clicked'); //remove from others
		this.addClass('clicked');
	});
});

Syntaxe mezi těmito dvěma frameworky je velmi podobná.

JavaScript jQuery

$(document).ready(function() {
	var lynx = $('a');
	lynx.click(function(e) {
		lynx.removeClass('clicked');
		$(this).addClass('clicked');
	});
});

Můj příklad ukazuje šedé pozadí, ale skvělé je, že vzhledem k tomu, že úryvek používá třídu CSS, můžete pozadí vytvořit libovolnou barvu. Vedle odkazu můžete přidat číselník nebo text odkazu umístit kurzívou. Samozřejmě po kliknutí na odkaz je jen okamžik, kdy můžete vidět přidaný efekt, ale myslím, že to stojí za to!