如何在JQueryUI DatePicker控件中的ChangeMonthYear上显示“正在加载”文本?

JQueryUI日期选择器控件具有onChangeMonthYear方法,该方法调用基于REST的服务以获取日期。该服务需要一些时间才能将日期返回到UI,并且日历似乎挂起了大约一秒钟。切换到新月份前两秒钟。

我想在调用服务并处理返回数据时显示某种类型的“正在加载...”文本或微调器图形。

我尝试使用$(“#checkingAvailability”)。show();设置要在通话中显示的标签。但是,直到返回数据后,UI才会更新。

我真正需要做的是,在基于REST的服务正在处理返回数据时,隐藏日历控件并显示“正在加载...”标签或图形,然后在结果成功后再次显示日历。 / p>

谁能指出正确的方向或提供一些示例代码?我很困惑。

pirate96 回答:如何在JQueryUI DatePicker控件中的ChangeMonthYear上显示“正在加载”文本?

由于DatePicler窗口小部件的性质不断变化,您可以考虑制作可根据需要隐藏或显示的加载gif和阴影。由于我无法复制您的示例(未提供),因此我可以提供这样的示例。

$(function() {

  function makeLoader(cnt,img) {
    return $("<div>",{
        class: "ui-datepicker-loading"
      })
      .css({
        background: "rgba(0,0.65)",width: "272px",height: "224px","border-radius": "3px",color: "white","text-align": "center"
      })
      .html("<p style='padding-top: 100px'>" + cnt + "</p><img width='20' src='" + img + "'></img>")
      .appendTo("body")
      .hide();
  }

  function showLoader(tObj) {
    $(".ui-datepicker-loading").show().position({
      my: "left top",at: "left+3 top+3",of: tObj
    }).css("z-index",1001);
  }

  function hideLoader() {
    $(".ui-datepicker-loading").hide().position({
      my: "left top",at: "left-300 top-300",of: $("body")
    }).css("z-index",0);
  }

  $("#datepicker").datepicker({
    changeMonth: true,changeYear: true,onChangeMonthYear: function(yy,mm,dp) {
      showLoader($(this).datepicker("widget"));
      setTimeout(hideLoader,2000);
    }
  });
  var l = makeLoader("Getting dates...","https://i.gifer.com/ZKZg.gif");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

首次调用回调时,我们将显示加载元素。收集完数据后,我们就可以将其隐藏。

本文链接:https://www.f2er.com/2897205.html

大家都在问