9

如何正确使用PrimeFaces大对话框？

HTML 世界中的对话框最初被认为仅用于消息和简单问题，但并非经常用于从DataTable中选择元素。这不是正确的用例吗？

DataTable 本身可以在两个方向上都很大。我们可以使用分页器并仅显示 5 行，从而限制了功能。如果用户屏幕允许，为什么不显示 15？我们可以让用户选择显示的行数，是还是不是？

但是如果我们这样做，并且如果用户在小屏幕上选择了 15 行，那么对话框会变得比那个屏幕大，并且这个对话框不能做任何事情，因为关闭按钮不再可用。恕我直言，一个大而讨厌的错误。

但是根据这个论坛讨论http://forum.primefaces.org/viewtopic.php?f=3&t=19211没有错，甚至给出了解决方案：根本不要使用对话框！但是我不相信这样的解决方案，因为我知道浏览器有滚动条，如果内容大于屏幕，滚动条就会显示。因此，至少在理论上，可以以滚动显示的方式将对话框添加到页面。可以添加一些 0px 宽度和 0px 高度 div，使主页适应显示的最大对话框的宽度和高度，以便用户始终可以将对话框拖动到页面顶部并访问底部按钮。

我的问题是：如何通过大对话框修复或解决该问题？如果它们比当前视口大，如何让它们完全显示？

4

1 回答 1

7

一般的问题是在 PrimeFaces 中缺少任何文档大小适配代码来进行对话。更糟糕的是设置对话框为位置：固定，这使得它们不可滚动。所以我离开了位置：当对话框适合窗口时固定，否则我设置了位置：绝对并调整文档大小，以便适合对话框（启用滚动）：

function handleResizeDialog(dialog) {
    var el = $(dialog.jqId);
    var doc = $('body');
    var win = $(window);
    var elPos = '';
    var bodyHeight = '';
    var bodyWidth = '';
    // position:fixed is maybe cool, but it makes the dialog not scrollable on browser level, even if document is big enough
    if (el.height() > win.height()) {
        bodyHeight = el.height() + 'px';
        elPos = 'absolute';
    }   
    if (el.width() > win.width()) {
        bodyWidth = el.width() + 'px';
        elPos = 'absolute';
    }
    el.css('position', elPos);
    doc.css('width', bodyWidth);
    doc.css('height', bodyHeight);
    var pos = el.offset();
    if (pos.top + el.height() > doc.height())
        pos.top = doc.height() - el.height();
    if (pos.left + el.width() > doc.width())
        pos.left = doc.width() - el.width();
    var offsetX = 0;
    var offsetY = 0;
    if (elPos != 'absolute') {
        offsetX = $(window).scrollLeft();
        offsetY = $(window).scrollTop();
    }
    // scroll fix for position fixed
    if (pos.left < offsetX)
        pos.left = offsetX;
    if (pos.top < offsetY)
        pos.top = offsetY;
    el.offset(pos);
}
于 2012-12-17T16:11:33.413 回答