Wicket の ModalWindow の中に jQueryUI の Datepicker 等を配置すると、
ドラッグした時に残されるのでドラッグさせない方法を先日、
http://blog.zaq.ne.jp/oboe2uran/article/1124/
で書きましたが、やはりモーダルウィンドウとしての価値がなくなり良くありません。
ドラッグイベントを捕捉して対処したかったのですが、モーダルウィンドウの CAPTION にマウスが触れた時、またはクリックした時に
開いているカレンダーは閉じる。Autocomplete のプルダウンは閉じるとした方が良いようです。
ModalWindow を起動するとき、AJAXのビヘビアで起動することになると思いますが、その時に以下のように用意した JavaScript メソッドを世呼び出します。
var setModalDatepicker = function(){
$.datepicker.setDefaults($.datepicker.regional["ja"]);
/* class="datepicker" に対して datepicker を適用する */
$("input[class='datepicker']").datepicker({
prevText:"前月", nextText:"翌月",
changeMonth: true,
changeYear: true, yearRange: '-3:+4',
});
};
var captionSetting = function(){
$("div[class='w_caption']").mouseover(function(){
/* Autocomplete のプルダウンを閉じる */
$("input[class='ui-autocomplete-input']").autocomplete("close");
/* Datepicker のカレンダーは、全て隠す */
$("input[class$='hasDatepicker']").datepicker("hide");
});
};
======================
class="w_caption" の div に対してこのようにすれば良いのです。
モーダルウィンドウの起動は、、
final ModalWindow window = new ModalWindow("modal");
add(new Button("openmodal").add(new AjaxEventBehavior("onclick") {
@Override
protected void onEvent(AjaxRequestTarget target){
window.setContent(new ModalPanek(window.getContentId()));
window.setResizable(false);
window.show(target);
target.appendJavaScript("setTimeout('setModalDatepicker();captionSetting();', 200);");
}
}));
=======================
show() の後で、JavaScript メソッドを setTimeout で呼びます。
更に、注意すべきことがあります。
ModalWindow の中に、AutoCompleteTextField を配置した時、
肝心のプルダウンが ModalWindow の背後に回ってしまいます。
Wicketのユーザフォーラムで、Wicketのコミッタである Igor氏は、CSS スタイルシートで、ui-autocomplete の z-index を上げればいいとだけ言ってますが、
どのくらいの数値にすれば良いのかまでは、言ってません。
使用状況によってい不確定な値なのだとすると相対値?
試行錯誤の結果、すごく大きい値を指定しないとダメだった。
z-index: 10000; ではNG
CSSを、
.ui-autocomplete{
z-index: 100000;
}
と書いてやっと思い通りに表示される。