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-datepicker使用 javascript 使课程居中？显然，CSS 不起作用。

4

2 回答 2

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 回答
3

如果您使用该.dialog方法，它接受一个参数，pos该参数是[x, y]您希望对话框出现的位置的坐标数组（上/左）。

此解决方案要求您计算顶部和左侧值，以使对话框看起来居中在页面上。这取决于盒子的大小和视口的大小，您可以通过$(window).height()和来确定$(window).width()。您必须即时生成它。

于 2012-05-08T01:59:42.837 回答