0

jQuery の hover() 関数の結果として、Raphael キャンバスにテキストが残っています。私は基本的に、円の上にカーソルを置いたときにテキストが表示されるようにし、円の上にカーソルを置くのをやめるとテキストが消えることを保証します (hoverOut())。

以下に示すように、hoverOut() でテキストを remove() しようとしていますが、うまくいきません。ただし、長方形を削除する場合は問題なく機能します。get() リクエストに時間がかかりすぎることと関係がありますか?

node = paper.circle(value.xpos_init, value.ypos_init, node_rad).attr({"fill": "#ff0000"})
       .hover(function(e){
                posx = e.pageX - $('#canvas').offset().left;
                posy = e.pageY - $('#canvas').offset().top; 
                createMenu(posx,posy,"10");
              },
              function(){
                menu.remove();
                menu_deg_cent_text.remove();
              });

function createMenu(x,y,id_in)
{
  menu_x = 100;
  menu_y = 60;
  menu = paper.rect(x,y,menu_x,menu_y).attr({"fill":"white","stroke":"red"});
  $.get("../php/text.php", {id : id_in},
    function(data){
    menu_deg_cent_text = paper.text(x+(menu_x/2),y+(menu_y/2),"test_text");
  });
}
4

1 に答える 1

1

Raphael を使用してツールチップ ボックスを作成するのではなく、ネイティブ Javascript を使用することを強くお勧めします。フローティング要素は、スタイル設定やテキストの折り返しなどをより適切に処理します。

node = paper.circle(100, 100, 50).attr({"fill": "#ff0000"})
    .hover(function(e) {
        //if you want to calculate position by mouse
        //posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        //posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop-15;
        posx = this.attr('cx');
posy = this.attr('cy') - this.attr('r');        
        document.getElementById("tip").style.top = posy + "px";
        document.getElementById("tip").style.left = posx + "px";
        document.getElementById("tip").style.display = "block";
    }, function(e) {
        document.getElementById("tip").style.display = "none";
});

ここでの動作デモ: http://jsfiddle.net/jLSUa/1/

mouseover イベント内に AJAX 呼び出しを配置することに関しては、非常に賢明ではないようです。マウスオーバー テキストを事前に読み込むことはできますか?

于 2012-12-21T18:05:18.010 に答える