1

我有一个与 primefaces 展示柜类似的表（第二个表 - 带复选框的多项选择）： http: //www.primefaces.org/showcase/ui/datatableRowSelectionRadioCheckbox.jsf

当我将鼠标悬停在自动生成的复选框之一（标题中选择所有其他复选框的复选框）上时，我想添加一个带有信息的小弹出框（类似于 HTML 标题属性）。复选框由这行代码生成：

<p:column selectionMode="multiple" style="width:2%" />

上面的代码创建带有复选框行的列。标题行是一个特殊的复选框，它选择所有其他复选框。例如，我想添加一条悬停消息，例如“单击此按钮将选中所有复选框”。

我尝试了以下但没有任何效果：

  • title来自 HTML 的属性
  • <p:toolkit>标签
  • <p:overlayPanel>标签（问题是它应该用于 p:column 中的某些元素，例如文本，但在我的情况下，p:column 中没有内容 - 只是生成的复选框）
4

1 回答 1

0

我设法自己解决了。

  1. 我在外部创建了一个 div <p:dataTable>（在我的情况下：在页面顶部）
  2. title="..."使用属性时，我将所说的 div 设置为类似于默认弹出窗口的样式。我还添加了position:absolute和display:none。
  3. 我添加了跟踪鼠标坐标的 jQuery 脚本，然后当鼠标悬停时复选框将它们用作divtop的left属性并将所述 div 显示更改为block. 它会导致 div 在复选框悬停时出现在鼠标光标附近。

同样重要的是要知道，在 primefaces 中，我指定的复选框始终具有名为ui-chkbox-all

这是代码：

HTML：

<div id="test">TEST</div>

CSS：

#test 
{
    border: 1px #767676 solid;
    color: #767676;
    padding: 2px;
    text-align: center;
    background-color: white;
    width: 100px;
    position: absolute;
    display: none;
}

JAVASCRIPT/JQUERY：

var mouseX;
var mouseY;

$(document).mousemove( function(e) {
    mouseX = e.pageX - 80;
    mouseY = e.pageY - 80;
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseenter(function(){
        $("#test").css("display", "block");
        $("#test").css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });
});

$(document).ready(function(){
    $(".ui-chkbox-all").mouseleave(function(){
        $("#test").fadeOut('slow');
    });
});
于 2013-09-09T14:09:25.567 回答