En debuggant un des Ajax Toolkits, je suis tombé sur une petite merveille. Lorsque l'on fait un peu de JavaScript on est très souvent en train de manipuler le DOM pour créer de nouveaux éléments. Pour cela on utilise la méthode document.createElement puis on lui affecte les propriétés qui vont bien avant de faire un parentNode.appendChild.
var container = {};
$common.createElementFromTemplate({
nameTable : container,
parent : $get('pnl1'),
nodeName : 'div',
name : '_elt',
cssClasses : [ 'class0', 'class1' ],
visible : true,
opacity : .8,
properties : {
style : {
height : '100px',
width : '100px',
backgroundColor :'#00FFFF'
}
},
// ne pas oublier de faire des $clearHandlers lors du dispose
events : {
click : function() { alert("foo"); },
mouseover : function() { container._elt.style.backgroundColor = '#FF00FF'; },
mouseout : function() { container._elt.style.backgroundColor = '#00FFFF'; }
},
children : [
{
name : '_btn',
nodeName : 'button',
events : {
click : function(){alert('yeeahhh');}
}
}, {
nodeName : 'span',
properties : {
innerHTML : 'value1'
}
}
]
});