0

デフォルトで生成されるコードは次のとおりです

<div id="ui-datepicker-div" class="ui-datepicker 
  ui-widget ui-widget-content ui-helper-  clearfix ui-corner-all 
  ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; 
  position: absolute; left: 349px; top: 453px; z-index: 1; display: block; ">

これに伴う問題は、日付ピッカーが、必要な場所の中央ではなく、トリガー入力のすぐ隣に表示されることです。

ここでデモサイトを見ることができます：http：//enniakiosk.spin-demo.com/travelers.php


.ui-datepickerjavascriptを使用し てクラスを中央に配置する方法を知っている人はいますか？明らかに、CSSは機能しません。

4

2 に答える 2

3

このメソッドを使用している場合は、ダイアログを表示する場所の座標 (上/左) の配列である.dialogパラメーターを受け取ります。pos[x, y]

このソリューションでは、ダイアログがページの中央に表示されるように、上と左の値を計算する必要があります。これは、ボックスの大きさとビューポートのサイズに依存し、 と で決定でき$(window).height()ます$(window).width()。これをオンザフライで生成する必要があります。

于 2012-05-08T01:59:42.837 に答える
3

あなたが望むことを達成するための迅速で汚い方法は、CSS を介して行うことができます。jquery UI スタイルを直接オーバーライドするか、独自のスタイルシートに追加することができます。これは "!important" の使用に依存していますが、機能しており、UI コードを掘り下げる必要はありません。

独自のスタイルシートに追加できるものは次のとおりです。生成している日付ピッカーのサイズが必要になります。ここでは、一般的な demoのサイズを使用しています。

#ui-datepicker-div {
position: absolute !important;
left: 50% !important;
top: 50% !important;
margin-left: -96px; /* approx half the height of the datepicker div - adjust based on your size */
margin-top: -73px; /* half the height of the datepicker div - adjust based on your size */
}

CSS で「!important」を使用することは避けるべき松葉杖ですが、それがどのように行われるかを示すだけです...

于 2012-05-07T21:26:53.293 に答える