javascript - 如何在选项卡内容完全加载 AJAX 之前显示加载消息？

Question

我正在使用 jQuery UI 1.10 和具有 AJAX 功能的jQuery UI Tab小部件。我正在使用的 JavaScript 代码如下所示（基本简单）：

$('.selector').tabs({
  beforeLoad: function (event, ui) {
    ui.panel.html('Loading...');
  }
});

单击选项卡“标题”时，我想在选项卡“正文”中显示加载消息（文本消息），直到选项卡内容完全加载 AJAX，之后加载消息应替换为 AJAX 检索数据. 我怎样才能做到这一点？

Answer 1

您可以通过以下方式做到这一点：

1. 定义将通过 AJAX foreach 选项卡加载数据的函数。
2. 在选项卡回调中show，create您调用一些函数来管理调用哪个 AJAX 函数来加载正确的内容。
3. 最后，在您的 AJAX 函数中，您首先更改您的 html 以显示加载消息，然后在请求完成后您可以将其删除。

它很长，但它可以让你更好地控制你想做的事情。

Answer 2

它不工作吗？

$('.selector').tabs({
  beforeLoad: function (event, ui) {
    //show msg
  },
  load: function (event, ui) {
    //hide msg
  }
});

Answer 3

我所做的最好的事情就是针对 ajax 驱动的标签页...希望你会喜欢这个答案

$("#facilityTabContainer").tabs({ panelTemplate:"Loading..." , selected : 0, scrollable : true, cache : false });

您甚至可以修改 jquery.ui.tabs 中的 panelTemplate ，以便应用程序中的所有选项卡都将自动获取“正在加载文本或图像”。猜猜它也解决了你的第一个标签加载问题。