Question

我在jquery对话窗口中有一个日期选择器。由于某种原因，我必须关闭并重新打开window.resize上的日期选择器。到目前为止，我已经尝试过：

$(window).resize(function () {

    if ($("#myDialog").is(":visible")) {
        $("#myDialog").dialog({
            position: {
                my: "center",
                at: "center",
                of: window
            }
        });

        var field = $("#myDialog").find("input.hasDatepicker");
        field.datepicker('hide');
        field.datepicker('show');
    }

});

不幸的是，使用此代码后，日期选择器在调整大小后几次“闪烁”。如何避免这种情况？

PS：为了获得更好的可见性，我还在此处添加了原始的Fiddle，您可以在其中通过减少结果窗口来查看问题：

var dialog = $("#dates").dialog({
  autoOpen: false,
  height: 'auto',
  modal: true,
  position: {
    my: "center",
    at: "center",
    of: window
  },  
  resizable: false
});


$(function() {
  $("#openDialog").on("click", function() {
    dialog.dialog("open");
  });

  $(".datepicker").datepicker();
});


$(window).resize(function() {
  var field = $(document.activeElement);
  if (field.is('.hasDatepicker')) {
    field.datepicker('hide').datepicker('show');
  }
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<button id="openDialog">
  Click to open Dialog
</button>

<div id="dates" class="hidden">
  <input type="text" class="datepicker" id="date1" />
</div>

window.resize

0 个答案: