How To Use – Tutorial – jQuery Data

If you don’t know what jQuery Data is, watch this!

demo
* click on the squares

code
$(function(){
//register event handler: toggle span position on click.
$("#demoContainer").delegate('span','click',function(){
if($(this).data('toggle') == 1)//if the span is up
$(this).animate({'top':$(this).data('top')}).data('toggle',0);
else //else (the span is down)
$(this).animate({'top':'0px'}).data('toggle',1);

});
var index = 0;
//register event handler: create new span on click
$("#addNewSquare").click(function(){
//generate color
var color = 'hsl('+ index*30 +', 100%, 50%)';
//generate position
var x = Math.round(Math.sin(index*30+11)*30+30);
//create the span and append it
$('<span>').appendTo("#demoContainer").data({top:x,index:index}).css({top:x,background:color});
index++;

});
//register event handler: toggle all spans on click
$("#toggleAll").click(function(){
$("#demoContainer span").click();
});

});

©2012 jQuery Debugger

hosted by Moonsite