var $elem = elem;
var position = $elem.position();
var output = {};
var winX = $(window).height();
var winY = $(window).width();

output.width = $elem.width();
output.height = $elem.height();
output.bottomLeftX = position.left;//left top
output.bottomLeftY = position.top + output.height;//left bottom
output.bottomRightX = position.left + output.width;//right top
output.bottomRightY = position.top + output.height;//right bottom


if(position.left > 0 && position.top > 0 && position.left+output.width < winY && position.top+output.height < winX)
{
    //something
}
else
{
    alert('not gonna fit')
}

return output;

无论我尝试哪种方式,我似乎都无法正确解决,上面是我来这里寻求帮助之前的最后一次尝试。 我要做的是获取元素在DOM中的位置,并根据其位置最终显示另一个元素。 有点像工具提示,但在某些方面有所不同。 无论如何。 我试图弄清楚如果要显示的元素将要离开屏幕,并且即使我希望从另一个方向显示它,也可以翻转输出。 。

当前触发显示隐藏元素的元素。 使该元素的左上边缘接触触发元素的左下边缘。 如果它要离开屏幕,例如触发元素在页面底部附近向下移动,而在右侧,我希望显示的元素与它的右下边缘接触触发的右上边缘对齐元件。 或者,如果trigger元素在页面的左下角,我希望它排列在trigger元素的左上边缘。.本质上,我需要覆盖寻找边缘并将元素保留在窗口中的基础。 当前显示的元素为200px x 550px宽,我不确定是否特别适合上述代码中的总体需求。

在不提出十二种以上逻辑的情况下,找出这些东西的任何好的方法都可以说,嘿,这将从窗口/视口的任何一个边缘掉下来,我们需要重新放置它。 匹配

===============>>#1 票数:0

好吧,在没有任何帮助的情况下,到处都是玩耍而感到头疼的是,我想出了一个对我有用的解决方案。 最后,我将上述内容放入其自己的函数中,以评估正在传递的内容的某些方面,然后创建一个函数,以测量所显示的元素并将其放置在屏幕上。 问题的一部分是由于将其动态添加到dom中,然后将其样式设置为display:none ,在实际显示之前,该脚本无法确定其放置位置,位置或放置方式。 因此,在显示元素之后,我将在其上运行第二个功能,以在需要时根据需要移动它。

function tippedOffElemPosition(elem)
{
    var $elem = elem;
    var $msg_elem = $elem.next('.tippedOff_msg');
    var position = $elem.position();
    var offset = $elem.offset();

    var output = {};
    var win_height = $(window).height();
    var win_width = $(window).width();

    output.win_height = win_height;
    output.win_width = win_width;
    //hover trigger
    output.elem_width = $elem.width();
    output.elem_height = $elem.height();
    output.elem_left_top = position.left;//left top
    output.elem_left_bottom = position.top + output.elem_height;//left bottom
    output.elem_right_top = position.left + output.elem_width;//right top
    output.elem_right_bottom = position.top + output.elem_height;//right bottom
    output.elem_offset_left = offset.left;
    output.elem_offset_top = offset.top;
    //final position (default)
    output.setting_top = output.elem_left_bottom;
    output.setting_left = output.elem_left_top;

/*
    debugStr = '';
    debugStr += 'ref = '+$elem.data('ref')+'<br>';
    debugStr += 'win_height = '+win_height+'<br>';
    debugStr += 'win_width = '+win_width+'<br>';
    debugStr += 'output.elem_width = '+output.elem_width+'<br>';
    debugStr += 'output.elem_height = '+output.elem_height+'<br>';
    debugStr += 'output.elem_left_top = '+output.elem_left_top+'<br>';
    debugStr += 'output.elem_left_bottom = '+output.elem_left_bottom+'<br>';
    debugStr += 'output.elem_right_top = '+output.elem_right_top+'<br>';
    debugStr += 'output.elem_right_bottom = '+output.elem_right_bottom+'<br>';
    debugStr += 'output.elem_offset_left = '+output.elem_offset_left+'<br>';
    debugStr += 'output.elem_offset_top = '+output.elem_offset_top+'<br>';
    debugStr += 'output.setting_top = '+output.setting_top+'<br>';
    debugStr += 'output.setting_left = '+output.setting_left+'<br><br>';
    $('#debug').html(debugStr);
*/

    return output;
}
function tippedOffMsgElemPos(msg_elem, elPos)
{
    $msg_elem = msg_elem;
    var msg_position = $msg_elem.position();
    var msg_offset = $msg_elem.offset();
    var msg_width = $msg_elem.width();
    var msg_height = $msg_elem.height();
    var msg_right_side = msg_offset.left + msg_width;
    var msg_bottom = msg_offset.top + msg_height;
    //$('#debug').append('<br><br>msg_right_side = '+msg_right_side+'<br>msg_bottom = '+msg_bottom+'<br>elPos.elem_right_top ='+elPos.elem_right_top);

    var final_top = elPos.setting_top;
    var final_left = elPos.setting_left;

    if(msg_right_side > elPos.win_width)
    {
        final_left = elPos.setting_left-(msg_width-elPos.elem_width);
    }
    if(msg_bottom > elPos.win_height)
    {
        final_top = elPos.elem_offset_top-(msg_bottom+elPos.elem_height);
    }
    //$('#debug').append('<br>final_left = '+final_left);
    $msg_elem.css({"top":final_top, "left":final_left}).show();
}

这是我的最终结果。总而言之,我正在尝试为jquery创建一个工具提示插件,我可以根据自己的需求进行定制,而当您初次使用时,不一定需要在元素中添加硬编码的消息。 我希望在不久的将来获得的最终结果会更加复杂,但这对我来说已经足够了。

  ask by chris translate from so

未解决问题?本站智能推荐: