2

客观的

当表格单元格悬停在表格单元格的右上角时，会在表格单元格的右上角显示一个小的放大镜图标。将鼠标悬停在放大镜图标上并单击它将打开一个对话窗口，以显示有关该特定表格单元格中项目的详细信息。我想为数百个表格单元重复使用相同的图标，而不是每次都重新创建它。

部分解决方案

拥有一个<span>绝对定位和隐藏的单曲。当一个_previewable表格单元格悬停时，它<span>被移动到正确的位置并显示出来。这<span>也在 DOM 中移动为_previewable表格单元格的子项。这使得附加到的单击处理程序<span>能够找到_previewable父项，并从它的 jquery data() 对象中获取信息，该对象用于填充对话框的内容。

这是我的 HTML 的一个非常简化的版本：

<body>
    <span id="options">
        <a class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-search"></span>
            Preview
        </a>
    </span>
    <table>
         <tr>
             <td class="_previewable">
                 <img scr="user_1.png"/>
                 <span>Bob Smith</span>
             </td>
        </tr>
   </table>
</body>

这个CSS：

#options {
    position: absolute;
    display: none;
}

使用这个 jQuery 代码：

var $options = $('#options');
$options.click(function() {
    $item = $(this).parents("._previewable");
    // Show popup based on data in $item.data("id");
    Layout.renderPopup($item.data("id"),$item.data("popup"));               
});

$('._previewable').live('mouseover mouseout',function(event) {
    if (event.type == 'mouseover') {
        var $target = $(this);
        var $parent = $target.offsetParent()[0];

        var left = $parent.scrollLeft + $target.position().left 
            + $target.outerWidth() - $options.outerWidth() + 1;
        var top = $parent.scrollTop + $target.position().top + 2;

        $options.appendTo($target);
        $options.css({
            "left": left + "px",
            "top": top + "px"
        }).show();
    }
    else {
        // On mouseout, $options continues to be a child of $(this)
        $options.hide();
    }
});

问题

此解决方案完美运行，直到通过 AJAX 重新加载或更改我的表的内容。因为<span>已从 移动<body>到单元格的子单元格，所以在 AJAX 调用期间它会被丢弃并替换。所以我的第一个想法是<span>在鼠标移出表格单元格时将背部移动到主体，如下所示：

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

但是，这样一来，<span>鼠标悬停就会消失。_previewable当鼠标移入 时，似乎会调用 mouseout 事件<span>，即使它<span>是表格单元格的子单元格_previewable并完全显示在_previewable表格单元格的边界内。目前，我只在 Chrome 中对此进行了测试。

问题

  1. _previewable当鼠标仍在边界范围内时，为什么会调用 mouseout _previewable？是因为<span>绝对定位吗？

  2. 如何在不重新创建<span>每个 AJAX 表引用的单击处理程序的情况下完成这项工作？

4

2 回答 2

5

如果您更改事件，那么您所拥有的其余部分（附加到<body>）将起作用，如下所示：

$('._previewable').live('mousenter mouseleave',function(event) {

与mouseoverand不同mouseout，mousenterandmouseleave事件在移入或移出孩子时不会触发，因此在这种情况下它们的行为会像您想要的那样。

不过为了清洁，我会绑定.live('mouseenter) 和.live('mouseleave')单独并删除if()，查看和查看发生了什么要容易得多，但可能只是我 :)

于 2010-04-20T20:20:33.803 回答
1

为了避免在每个单元格中出现微小的图像，这看起来需要做很多工作。通过“重用”元素的一个实例，您并没有真正获得太多收益。浏览器只需下载一次图像。而且从性能的角度来看，摆弄 DOM 树比仅仅切换高亮元素的显示属性需要更多的资源。

最简单的方法可能就是把<span>你打印出来的每一个单元格中，然后使用 CSS 来隐藏/显示。

于 2010-04-20T20:18:44.710 回答