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() メソッドは 2 つの引数を取ります。

setXY メソッドの最初の引数は、HTMLElement の ID または実際の HTMLElement オブジェクトです。2 番目の引数は、[x, y] の 2 つの値を含む配列です。ここで、x はドキュメントの左端からの距離、y はドキュメントの上端からの距離です。

ソース: http://developer.yahoo.com/yui/examples/dom/setxy.html

そのため、setXY メソッドに渡される newXY 変数の値を変更することで、カレンダーが表示される場所を簡単に調整でき、問題なく動作します。

ただし、ページのサイズを変更すると、カレンダーの左上隅が showButton の左下隅のすぐ下に配置されます。ページのサイズが変更されたときに再配置が発生するのは何ですか?どうすれば解決できますか?

編集:もう少し情報:

  • これは、IE、Firefox、および Chrome の最新バージョンで発生します。
  • ページのサイズを変更してからボタンをクリックしてカレンダーを表示すると、予定された場所にカレンダーが表示されますが、カレンダーを開いた後にページのサイズを再度変更すると、位置が変更されます
4

0 に答える 0