8

このテーマについてたくさん読んだ後、私はまだ問題の解決に取り組む方法について暗闇の中にいます。問題を明確にするために、入力コントロールが関連付けられた状態でカレンダーを完全にスクロールし、画面の位置に固定されたままにしないようにします。これがスクロールのない画像です:(これはスクロールでも保持したいものです） ここに画像の説明を入力してください

そしてここにスクロール中の画像があります:(それは私が望むものではありません）

ここに画像の説明を入力してください

どんなヒントでも大歓迎です。更新：これは問題を詳細に描写したリンクです。スクロールしている間、カレンダーをコントロールに固定したいと思います。

4

1 に答える 1

14

あなたのものがスクロール可能なdivであるかどうかはわかりませんが、ここで発生する問題は、スクロール可能なdiv内でjQueryUIの日付ピッカーがHTMLコンテンツとともに移動しないことです。

これは、問題を示すデモhttp://jsfiddle.net/joycse06/m6A5q/embedded/result/のフィドルです。入力をクリックして、そのdivをスクロールしてみてください。

これは、jQuery UIがカレンダーUIを、コンテナーのスクロール可能なdivの位置として作成absolute relativeするdocumentかどうかに関係なく作成するために発生します。windowしたがって、スクロール可能なdivがスクロールされても、メインウィンドウのスクロールコンテキストは変更されないため、datepickerカレンダーはそのdiv内の他のhtml要素に従いません。

したがって、解決策は、そのdivがスクロールされたときにカレンダーを非表示にすることであり、入力が表示されていない場合は、日付ピッカーカレンダーを非表示にすることができます。したがって、更新されたコードは次のようになります

var datePicker = $('#datepicker').datepicker();

$(".demo").scroll(function() {
  datePicker.datepicker('hide');
  $('#datepicker').blur();
});

$(window).resize(function() {
  datePicker.datepicker('hide');
  $('#datepicker').blur();
});

コンテナdivまたはウィンドウがスクロールされると、日付ピッカーが非表示になります。これが実用的なフィドルですhttp://jsfiddle.net/joycse06/m6A5q/2/

私が使用して$('#datepicker').blur();いるのは、ユーザーがスクロールすると.demoカレンダーが非表示になりますが、inputまだフォーカスが合っているため、スクロールして戻ると混乱する可能性があるためです。ぼかすと、彼はinputもう一度クリックする必要があり、日付ピッカーが表示されます。

于 2012-05-17T17:51:38.963 に答える