javascript - Raphael Js toggle content when click -
my english trash, want try.
that version modified me, these vectors colorful buttons are. i'm trying display text when click each of buttons.but when click other buttons, texts overlap, shown in picture:
http://i.stack.imgur.com/s39dx.png
this code handles event:
$('.get').find('.arc').each(function(i){ var t = $(this), color = t.find('.color').val(), value = t.find('.percent').val(), text = t.find('.text').text(); conteudo = t.find('.conteudo').text(); alet = ( 11.25 * ); /*title.rotate(20.25 * i);*/ rad = arco_espaco; var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width,}); var zm = r.path().attr({ arc: [value, color, rad], 'stroke-width': arco_width, opacity: 0}).tofront();/*mask*/ var title = r.text(220, 0, defaulttext).attr({ font: '20px arial', fill: '#fff' }).tofront(); title.rotate(11.25*(i+0.40),-1,5); var texto = r.text(300, 10, conteudo).attr({ font: '20px arial', fill: '#fff', "text-anchor":"start", opacity: 0 }).tofront(); var group = r.set(); group.push(z); group.push(title); ativo = 1; zm.mouseover(function(){ group.animate({ 'stroke-width': arco_ganho, opacity: .75 }, 1000, 'elastic'); if(raphael.type != 'vml') //solves ie problem title.stop().animate({ opacity: 1 }, speed, '>', function(){ title.attr({ text: text + '\n'}).animate({ opacity: 1 }, 50, '<'); title.tofront(); zm.tofront(); }); document.body.style.cursor = "pointer"; zm.mouseout(function(){ zm.tofront(); group.stop().animate({ 'stroke-width': arco_width, opacity: 1 }, speed*4, 'elastic'); title.stop().animate({ opacity: 0 }, speed, '>', function(){ title.attr({ text: defaulttext }).animate({ opacity: 0 }, speed, '<'); title.attr({ text: text + '\n' }).animate({ opacity: 0, align: left }, speed, '<'); }); document.body.style.cursor = "auto"; }); zm.click(function () { $("#diagram").css("background-color",color); texto.attr({opacity: 1}); tempp = texto; }); }) zm.tofront(); });
the text come html file:
<div class="get"> <div class="arc"> <span class="text">secretaria</span> <input type="hidden" class="percent" value="100" /> <input type="hidden" class="color" value="#f6c201" /> <span class="conteudo">teeeeexxxxxxtt >>>secretaria<<<</span> </div> <div class="arc"> <span class="text">financeiro</span> <input type="hidden" class="percent" value="100" /> <input type="hidden" class="color" value="#97be0d" /> <span class="conteudo">teee-------xtt >>>financeiro<<<</span> </div> </div>
see on jsbin http://jsbin.com/unojov/2/edit
Comments
Post a Comment