phpからjavascript、jqueryの世界に踏み込むと2次元の世界から3次元の世界に突入したような感覚になるんだが。

Posted by yonezo in 仕事 | Leave a comment
Pocket

まぁ要するに、phpでは要求に対して答えていればOKなんだけど、javascriptでグリグリと画面を書き換えていると、動的に不具合が飛び交う感じ。

「そんなclass知らんよ、だってワシ(ライブラリ)が呼ばれたとき、そいついなかったじゃん、知らんよワシ、なんもできんよ。」

 

と言われているような感覚。

live()でイベントをバインドすればOKじゃんとか言われそうなんですが、

プラグインとか呼んでいる場合はどうすれば良いのかさっぱり分からない状態。

ツールチップ表示させたいんだけど、なんで動かないんかさっぱりだわ。

 

$("div").live("mouseover",function(e){
    $(this).addClass("fadetips");
});

追記:

で、結局プラグインは断念して自作したナリ。

やってみたら思ったほど難しくなかったが、表示させる事よりも位置決めが面倒だ。

ブラウザ表示領域の右側目一杯で表示させると、デフォでカーソルの右側に表示させたりしていると、グニュっと潰れて表示されてしまう。

なので、どの程度までなら右側なのかとか、そういう位置決めが面倒。

hover()という便利なメソッドもあるんだが、live()の中でどうやって使ったら良いのか考えるのが面倒なので、素直にmouseoverとmouseoutでやりました。

$("div.det").live("mouseover",function(e){
if($(this).attr("class").indexOf("tooltip")!=-1){
$("div#overLayerToolTip").html($(this).attr("tooltip"))
.show(1)
.css({"top":e.pageY-20+"px",
"left":e.pageX+20+"px"});
}
});

//    元に戻す処理
$("div.det").live("mouseout",function(e){
$("div#overLayerToolTip").hide(1);
});

お約束だが、CSSとかでもグリグリやってるんで、これそのままではマトモに表示できない事をお断りしておきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です