Tau*_*ren 2 jquery css-position live
当表格单元格悬停在表格单元格的右上角时,会出现一个小的放大镜图标.将鼠标放在放大镜图标上并单击它将打开一个对话框窗口,以显示有关该特定表格单元格中项目的详细信息.我想为数百个表格单元重用相同的图标,而不是每次都重新创建它.
有一个<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中对此进行了测试.
_previewable当鼠标仍处于边界内时,为什么要调用mouseout _previewable？是因为<span>绝对定位？
如何在不重新创建<span>每个AJAX表referesh上的单击处理程序的情况下完成此工作？
如果您更改了您的活动,那么您拥有的其他内容(附加<body>)将起作用,如下所示:
$('._previewable').live('mousenter mouseleave',function(event) {
与mouseoverand 不同mouseout,当移动到孩子或从孩子移动时mousenter,mouseleave事件不会触发,所以在这种情况下他们会表现得像你想要的那样.
但是为了清洁,我会绑定.live('mouseenter并.live('mouseleave')单独删除它if(),它更容易看,看看发生了什么,可能只是我虽然:)
| 归档时间： |
|
| 查看次数： |
4099 次 |
| 最近记录： |