jQuery > 重置弹出窗口的 x 和 y 相对于启动窗口的图标

Question

我有一个 jQuery jPicker colorpicker，它绑定到输入文本字段并打开一个小的 picker.gif 图标的 onclick。我遇到的问题是（1）打开的颜色选择器似乎没有根据 picker.gif 的 x/y 位置定位（它打开远离点击点）和（2）颜色选择器确实似乎不知道视口的滚动位置（颜色选择器的顶部部分隐藏在窗口顶部）。

我想使用 jQuery 重新定位调色板 (1) 基于其绑定到的输入的 x/y 位置和 (2) 根据视口的可见 Y 位置重置它的顶部位置。

这是我创建新 jPicker 并将其绑定到标题和侧边栏的输入文本字段的脚本...

$('#theme_header_color').jPicker
(
    {position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);

$('#theme_sidebar_color').jPicker
(
    {position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
)

Answer 1

jPicker 已经设置为采用 x/y 坐标，因此您应该能够传递打开按钮的偏移量。您可能需要根据您的喜好调整按钮的高度和宽度以及任何填充。它未经测试，但应将其添加到 jPicker 设置中。

position: { x: $(this).offset.left, y: $(this).offset.top }

考虑按钮的高度和宽度。

position: { x: $(this).offset.left + $(this).width(), y: $(this).offset.top + $(this).height() }

更新

考虑垂直滚动位置

position: { x: $(this).offset.left + $(this).width(), y: ($(this).offset.top - $(window).scrollTop()) + $(this).height() }