Link Nudging pomocí Dojo

V minulosti jsme si pohrávali s posouváním odkazů pomocí MooTools a posouváním odkazů s jQuery. Ve snaze seznámit se s jinými frameworky JavaScriptu se pokusíme tento efekt duplikovat s dalším úžasným frameworkem:Dojo.

Zobrazit ukázku

JavaScript:Pokus 1

dojo.addOnLoad(function() {
	var links = dojo.query('a.nudge');
	//foreach...
	dojo.forEach(links,function(link) {
		var left = dojo.style(link,'paddingLeft');
		dojo.connect(link,'onmouseenter',function() {
			dojo.animateProperty({
				node:link,
				properties: {
					paddingLeft: (left + 10)
				}
			}).play();
		});
		dojo.connect(link,'onmouseleave',function() {
			dojo.animateProperty({
				node:link,
				properties: {
					paddingLeft: left
				}
			}).play();
		});
	});
});

Jakmile je DOM připraven, použijeme metodu dojo.query k nalezení všech odkazů na nudge. U každého odkazu, který najdeme, zaznamenáme jeho původní levé odsazení a ke každému odkazu přidáme události mouseenter a mouseleave, abychom animovali jeho levé odsazení.

JavaScript:Lepší řešení

dojo.ready(function() {
	dojo.query('a.nudge').forEach(function(link){
		var left = dojo.style(link,'paddingLeft');
		dojo.connect(link,'onmouseenter',function() {
		    dojo.anim(link, { paddingLeft:20 });
		});
		dojo.connect(link,'onmouseleave',function() {
		    dojo.anim(link, { paddingLeft:left });
		});
	});
});

Vedoucí Dojo Pete Higgins mi ukázal zhuštěnější verzi svého scénáře.

Zobrazit ukázku

Jednoduché, ne? Nejlepší způsob, jak se naučit používat jakýkoli rámec JavaScriptu, je duplikovat danou sadu kódu, kterou znáte, podobně jako my zde. Co si myslíte o tomto příkladu Dojo? Hledáte blízko k jQuery a MooTools?