With dojo.behavior you can write your code like this:

dojo.require(“dojo.behavior”);
dojo.ready(function(){
dojo.behavior.add({
‘a.nude’: {
‘onmouseenter’: function(evt) {
dojo.anim(evt.target, { paddingLeft:20 });
},
‘onmouseleave’: function(evt) {
dojo.anim(evt.target, { paddingLeft:left });
}
}
});
dojo.behavior.apply();
});

The good part on dojo.behavior is that you can call dojo.behavior.apply() as often as you like. It only updates your DOM incremental. Meaning it only adds the events to newly created DOM nodes, or only add things to a node that you added after the last call to dojo.behavior.apply().

That means you can do some ajax add nodes to your DOM, and call “dojo.behavior.apply()” after it. And the new nodes get your defined behavior.


dojo.anim(link, { paddingLeft: (left + 20) });


@Rafael F P Viana: You can use jQuery’s bind method which is the same as MooTool’s addEvent essentially.

Good post David, I actually really like Dojo’s layout so I might investigate. However, it’s clear that MT/jQ are the top two so I think I’m concentrating my skill on those two.

By the way, I think the Mootools code is more semantic than the rest, I mean, with jQuery one has to know that .hover is an event, unlike Mootools which says .addEvent.

I liked Dojo’s aproch, but the .connect is new to me, but just by reading it I understood that it will connect link to the event and the function.

Very nice example and keep up the good work.

$.ready(function() {
$('a.nudge').forEach(function(link){
var $link = $(link), left = $link.style('paddingLeft');
$link.hover(function(e){
$link.anim({ paddingLeft: /enter|over/.test(e.type) ? 20 : left})
})
});
});