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

Question

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

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

当单击标签“标题”时，我想在标签“body”中显示加载消息（文本消息），直到标签内容完全加载AJAX，之后加载消息应该用AJAX检索的数据替换。我该怎么做？

Answer 1

不工作吗？

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

Answer 2

您可以通过以下方式执行此操作：

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

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

Answer 3

我做的最好的事情只是为了ajax驱动标签...希望你会喜欢这个答案

$（＆＃34;＃facilityTabContainer＆＃34;）。标签（{ panelTemplate：＆＃34;正在加载...＆＃34; ，已选择：0，可滚动： true，cache：false}）;

你甚至可以修改jquery.ui.tabs中的panelTemplate，这样你应用程序中的所有选项卡都会自动获得加载文本或图像。并猜测它也解决了你的第一个标签加载问题..