1

私のページでは、j-query の ui-tabs を使用していくつかの要素を分離しています。.mouseover と .mouseout を使用して小さなヘルプ div をポップアップし、マウス ポインターの近くに配置します。

残念ながら、pageX/pageY を使用した配置は機能しないため、手動で元に戻しています。その位置を見つける方法があるはずですよね？タブを使用しているため、どこかでオフセットを計算する必要がありますか?

これが私がそれを使用している方法です：

$(".hashelp").mouseover(function(e){
        offsety = 5;
        offsetx = 5; //pop-up slightly below and right of the mouse.
        if($(this).attr("id")=="tablist")
        {
            offsety = -200;
            offsetx = -50;
        }
        else if($(this).parent().hasClass("ui-tabs-panel"))
        {
            console.log("pagex: "+e.pageX+" pagey: "+e.pageY+" helpx: "+helpx+" helpy: "+helpy);
            offsety = -200;
            offsetx = -15;
        }
        if(firsttime){
        $(this).find(".help").eq(0).css("top",(e.pageY+offsety));
        $(this).find(".help").eq(0).css("left",(e.pageX+offsetx));
        $(this).find(".help").eq(0).show();
        }

    }).mouseout(function(){
        $(this).find(".help").eq(0).hide();
    });

タブの html は次のとおりです。 $("#tabgroups").tabs() を使用して作成します。

<div id="tabgroups">
      <ul id="tablist" class="hashelp">
        <li><a href="#tab1">tab1</a></li>
        <div class="help" style="display:none;">
        please choose the right tab
        </div>
     </ul>
   <div id="tab1">
    <ul id="common" class="hashelp">
      <li><button>commonchoice1<button></li>
    <div class="help" style="display:none;">
    Some help stuff
   </div>
</div>
4

1 に答える 1

0

divの場所を見て、これを解決しました。それらはネストされていたため、動作が悪かったため、各 div を切り離して body 要素に追加し、正しい x と y を取得できるようにしました。今では美しく動作します。

var helppopup;
$(".hashelp").mouseover(function(e){
        offsety = 5;
        offsetx = 5;
            helppopup =  $(this).find(".help").eq(0);
        if(firsttime){
        $("body").append(helppopup.detach());
        helppopup.css("top",(e.pageY+offsety));
        helppopup.css("left",(e.pageX+offsetx));
        helppopup.show();
        }

    }).mouseout(function(){
        $(this).append(helppopup.detach())
        helppopup.hide();
    });
于 2012-09-06T22:57:30.657 に答える