Question

我正在为文本字段实现自动完成弹出窗口，因此我需要弹出窗口始终显示在文本字段下方。在ZK中执行此操作的标准方法是：

    popup.open( field, "after_start" );

这没关系，除了我的文本框是网格控件的一部分。当用户在屏幕底部附近的行上输入数据时，由于没有足够的空间在字段下方显示弹出窗口，ZK会调整弹出位置以使其完全可见，从而模糊文本框控件。 / p>

我的桌面设计有足够的空间来显示字段下方的弹出窗口;我只需要确保客户端滚动，以便弹出窗口保持在字段下方。

我已尝试使用Clients.scrollIntoView( popup );，但这没有用，因为弹出窗口会自动显示。

我知道的另一种可能性是使用"end_before"位置值将弹出窗口放在文本框的右侧，但这与自动完成弹出窗口的标准UI约定不一致。

Answer 1

可以使用Popup窗口小部件的opts方法的open参数（来自客户端）调整弹出窗口位置。有关详细信息，请参阅该方法的reference。

不幸的是，无法从Java代码设置此参数值，您应该覆盖客户端（即javascript）open方法的默认行为以获得结果。

在this article中描述了窗口小部件方法的覆盖。

在您的情况下，您应该在调用原始opts.overflow方法之前将open属性设置为任何值。例如：

<popup xmlns:w="http://www.zkoss.org/2005/zk/client">
    <attribute w:name="open">
        function (ref, offset, position, opts) {
            var _opts = opts || {}; // opts can be undefined! 
            _opts.overflow = true;
            this.$open(ref, offset, position, _opts);
        }
    </attribute>
</popup>

使用popup.open使用Clients.scrollIntoView打开此弹出窗口后，如果需要，可以将其显示。

如何确保ZK Popup出现在相应组件下方，如果需要可以滚动？

1 个答案: