Primefaces overlayPanel的延迟问题 - 加载到延迟

Question

我使用的是Primefaces 3.2和jsf 2以及glassfish 3.1.2.

我有ap:dataTable用户包含用户的头像.每当用户将鼠标移动到头像上时,ap:overlayPanel会在用户上显示更多信息(延迟加载),并在用户将光标移开时消失 - 如下所示:

<p:overlayPanel for="avatar" dynamic="true" showEvent="mouseover" hideEvent="mouseout" ...>

这非常有效 - 只要用户"缓慢".每当用户将光标快速移动到许多化身上方时,许多overlayPanel都会保持可见.例如,当用户将光标悬停在显示用户头像的位置上时,使用鼠标的滚轮向下或向上滚动用户.

我相信overlaypanel 会在调度dynamic="true"时从服务器动态加载信息(),并在服务器showEvent="mouseover"响应到达后显示overlaypanel.这样,当overlaypanel变得可见时,无法检测光标是否已经离开 - 因此hideEvent="mouseout"永远不会调度.

有没有办法让primefaces overlaypanel直接显示在mousover上,显示加载gif并在响应来自服务器时将内容更新到overlaypanel.

这是一个很好的appraoch或有没有人知道任何其他方式来解决这个讨厌的问题？

谢谢皮特

Answer 1

由于我的第一个答案已经很长并且包含有效信息,所以我决定打开一个新的答案来展示我的最终方法.

我现在使用Primefaces继承模式使代码更清晰.另外我注意到替换/覆盖整个bindEvents函数是不必要的,因为我们可以删除旧的事件处理程序.最后,此代码修复了最新的问题:ajax到达之前的隐藏事件.

PrimeFaces.widget.OverlayPanel = PrimeFaces.widget.OverlayPanel
        .extend({

            bindEvents : function() {
                this._super();

                var showEvent = this.cfg.showEvent + '.ui-overlay', hideEvent = this.cfg.hideEvent
                        + '.ui-overlay';

                $(document).off(showEvent + ' ' + hideEvent, this.targetId).on(
                        showEvent, this.targetId, this, function(e) {
                            var _self = e.data;

                            clearTimeout(_self.timer);
                            _self.timer = setTimeout(function() {
                                _self.hidden = false;
                                _self.show();
                            }, 300);
                        }).on(hideEvent, this.targetId, this, function(e) {
                    var _self = e.data;

                    clearTimeout(_self.timer);
                    _self.hidden = true;
                    _self.hide();

                });
            },

            _show : function() {
                if (!this.cfg.dynamic || !this.hidden) {
                    this._super();
                }
            }

        });

我很抱歉格式不佳:日食错误;)