$('body').eventManager({
':header' : {
mouseover: {
'h2' : function(elem) {
$(this).css('background-color','yellow');
},
'h3' : function(elem) {
$(this).stop().animate({'font-size':'2.5em'},500);
}
},
mouseout: {
'h3' : function(elem) {
$(this).stop().animate({'font-size':'1.6em'},500);
},
default : function(elem) {
$(this).css('background-color','transparent');
}
}
}
});
$('body').eventManager({
'ul li' : {
// events
click: {
'.event4' : function () {
$(this).removeClass('event4').css('color','brown');
},
'.event3' : function () {
$(this)
.css('color','red')
.removeClass('event3')
.addClass('event4');
},
'.event2' : function () {
$(this)
.css('color','blue')
.removeClass('event2')
.addClass('event3');
},
'.event1' : function () {
$(this)
.css('color','pink')
.removeClass('event1')
.addClass('event2')
},
default : function() {
if (this.className == '') {
$(this).addClass('event1');
}
if (!$(this).find('span').length)
$(this).append('');
$(this).find('span').text(' (class applied : '+this.className+')');
}
}
}
});
Example with mouseenter and mouseleave
(warning : only works with the next jquery 1.4.3, there's a bug with the returned event type)
$('body').eventManager({
'.testmouse strong' : {
mouseenter : function() {
$(this).css('text-transform','uppercase');
},
mouseleave : function() {
$(this).css('text-transform','none');
}
}
});
p event attached: click
p.testclass & p event attached: click
$('body').eventManager({
'p' : {
click: {
'.testclass' : function (elem,event) {
alert('.testclass! attached event -> '+event.type);
},
default : function () {
alert('this is the default event attached to the paragraph !');
}
}
}
});
$('body').eventManager({
'input[type=text]' : {
// events with no filtered selector
change : function() {
$(this).data('modified',true);
},
focusin : function() {
$(this).prev().prev('legend').css('color','red');
if (!$(this).data('modified')) {
$(this)
.data('val',$(this).val())
.val('');
}
},
focusout : function() {
$(this).prev().prev('legend').css('color','black');
if ($(this).val() == '') {
$(this)
.val($(this).data('val'))
.data('val',$(this).val())
.data('modified',false);
}
}
},
'form label' : {
mouseover : function() { $(this).css('font-weight','bold'); },
mouseout : function() { $(this).css('font-weight','normal'); }
}
});
$('body').eventManager({
'a' : {
click: {
'.test' : function (event) {
alert('.test! attached event -> '+event.type);
event.preventDefault()
},
default : function (event) {
alert('default event attached to the link');
event.preventDefault()
}
}
}
});
Treat functions as default
$('body').eventManager({
'#treat-functions-as-default': {
mouseover: function(elem) {
$(this).css('background-color', 'yellow')
},
mouseout: function(elem) {
$(this).css('background-color', 'transparent')
}
}
});