dojo的使用_使用Dojo链接链接

dojo的使用

In the past we've tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other JavaScript frameworks, we're going to try to duplicate that effect with another awesome framework: Dojo.

过去，我们通过MooTools和jQuery进行链接修饰。 为了使自己熟悉其他JavaScript框架，我们将尝试用另一个很棒的框架Dojo来复制这种效果。

View Demo 观看演示

JavaScript：尝试1 (The JavaScript: Attempt 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();
		});
	});
});

Once the DOM is ready, we use the dojo.query method to find all of the links to nudge. For every link we find, we record its original left padding and add mouseenter and mouseleave events to each link to animate its left padding.

DOM准备就绪后，我们就可以使用dojo.query方法找到所有要轻推的链接。 对于找到的每个链接，我们记录其原始的左侧填充，并向每个链接添加mouseenter和mouseleave事件以为其左侧填充设置动画。

JavaScript：更好的解决方案 (The JavaScript: Better Solution)

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

Dojo lead Pete Higgins showed me a more condensed version of his script.

Dojo负责人皮特·希金斯(Pete Higgins)向我展示了他的剧本的简明版本。

View Demo 观看演示

Simple, no? The best way to learn to use any JavaScript framework is to duplicate a given set of code you are familiar with, much like we did here. What do you think about this Dojo example? Look close to jQuery and MooTools?

简单，不是吗？ 学习使用任何JavaScript框架的最佳方法是复制您熟悉的给定代码集，就像我们在此处所做的那样。 您如何看待这个Dojo示例？ 看起来与jQuery和MooTools接近吗？

翻译自: https://davidwalsh.name/link-nudging-dojo

dojo的使用