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 の最新バージョンで発生します。
- ページのサイズを変更してからボタンをクリックしてカレンダーを表示すると、予定された場所にカレンダーが表示されますが、カレンダーを開いた後にページのサイズを再度変更すると、位置が変更されます