1

我想更改 Grails UI 插件的 datePicker 部分的日历显示位置。经过一番挖掘，我在 InputTagLib.groovy 文件中找到了它：

                    out << """
            YAHOO.util.Event.on("${showButtonId}", "click", function() {
                var buttonRegion = YAHOO.util.Dom.getRegion('${showButtonId}');
                var buttonHeight = buttonRegion.bottom - buttonRegion.top;
                var buttonWidth = buttonRegion.right - buttonRegion.left;
                var xy = YAHOO.util.Dom.getXY('${showButtonId}');
                var newXY = [xy[0] + buttonWidth, xy[1] + buttonHeight];
                YAHOO.util.Dom.setXY('${id}_calContainer_c', newXY);
                GRAILSUI.${jsid}Panel.show();
                if (YAHOO.env.ua.opera && document.documentElement) {
                    // Opera needs to force a repaint
                    document.documentElement.className += "";
                }
            });"""

位置设置在这一行：

                    YAHOO.util.Dom.setXY('${id}_calContainer_c', newXY);

YAHOO.util.Dom.setXY() 方法有两个参数。

setXY 方法的第一个参数是 HTMLElement 的 ID，或者是实际的 HTMLElement 对象。第二个参数是一个包含两个值的数组： [x, y] 其中 x 是到文档左边缘的距离，y 是到文档上边缘的距离。

来源：http: //developer.yahoo.com/yui/examples/dom/setxy.html

因此，我可以通过更改传递给 setXY 方法的 newXY 变量中的值轻松调整日历的显示位置，并且效果很好。

但是，如果我调整页面大小，日历会将其左上角直接放在 showButton 的左下角下方。调整页面大小时发生重新定位的原因是什么，我该如何解决？

编辑：更多信息：

  • 这发生在最新版本的 IE、Firefox 和 Chrome 中
  • 如果我调整页面大小然后单击按钮以显示日历，日历会显示在预期的位置，但如果我在日历打开后再次调整页面大小，它将重新定位
4

0 回答 0