Tutti i microdati di HTML5 possono essere usati per associare degli stili CSS da usare nelle animazioni jQuery agli elementi. Il problema è che per usare questi stili bisogna convertire la stringa del valore di un attributo in un oggetto JSON. Alcuni browser non supportano l'oggetto JSON e usare la funzione eval() pone dei problemi di sicurezza. Fortunatamente esiste una soluzione. Vediamo quale.
Partiamo dal seguente elemento HTML:
<div id="test" data-animation="width:150,height:150,opacity:0.5"></div>
Quello che a noi serve è un metodo per trasformare un valore in un oggetto. Possiamo creare il seguente plugin:
(function($) {
$.fn.getData = function(attr) {
var that = this;
var data = this.attr(attr);
var styles = {};
var parts = data.split(',');
for(var i = 0; i < parts.length; i++) {
var props = parts[i].split(':');
styles[props[0]] = props[1];
}
return styles;
};
})(jQuery);
Il plugin scompone la stringa del valore e popola un oggetto vuoto utilizzando il metodo split() di JavaScript. A questo punto l'oggetto può essere utilizzato con il metodo animate():
$(function() {
$('#anim').click(function() {
var target = $('#test');
var anims = target.getData('data-animation');
target.animate(anims, 1000);
return false;
});
});
Potete visionare l'esempio finale in questa pagina.