JQuery UI 选项卡 - “正在加载...”消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1730154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI Tabs - "Loading..." message
提问by Balu
All,
全部，
I am using Jquery UI nested tabs. I was just wondering if there is any way to display an AJAX Spinner image next to the tab text, while the tab is loading. I do not want to change the tab text to "Loading..". Consider that when multiple tabs are loading at the same time or one after the other, the spinner image should be displayed next to each loading tab..
我正在使用 Jquery UI 嵌套选项卡。我只是想知道是否有任何方法可以在选项卡加载时在选项卡文本旁边显示 AJAX Spinner 图像。我不想将标签文本更改为“正在加载...”。考虑到当多个选项卡同时加载或一个接一个加载时，微调图像应显示在每个加载选项卡旁边。
Any Suggestions?
有什么建议？
Thanks
谢谢
回答by jeroen.verhoest
If you're using caching for your tabs, then this solution is propably a better fit, it only shows the ajax loading if the content isn't already on the page.
如果您为选项卡使用缓存，那么此解决方案可能更适合，它仅在页面上尚未显示内容时才显示 ajax 加载。
$(".tabs").tabs({
cache:true,
load: function (e, ui) {
$(ui.panel).find(".tab-loading").remove();
},
select: function (e, ui) {
var $panel = $(ui.panel);
if ($panel.is(":empty")) {
$panel.append("<div class='tab-loading'>Loading...</div>")
}
}
})
回答by Kipper
I used a different method to this myself. I wanted the tab titles to remain as they were, and have the 'loading' information in the tab itself.
我自己使用了不同的方法。我希望标签标题保持原样，并在标签本身中包含“加载”信息。
The way I did it is as follows:
我的做法如下：
$("#matchTabs").tabs({
spinner: "",
select: function(event, ui) {
var tabID = "#ui-tabs-" + (ui.index + 1);
$(tabID).html("<b>Fetching Data.... Please wait....</b>");
}
});
Like the previous poster, I used the spinner method to prevent the tab titles from being changed. The select event fires when a new tab is selected, so I got the ID of the currently selected tab and added one to create a variable that would reference the DIVs in which the ajax content is loaded by default.
和之前的海报一样，我使用了 spinner 方法来防止标签标题被更改。select 事件在选择新选项卡时触发，因此我获取了当前选定选项卡的 ID 并添加了一个以创建一个变量，该变量将引用默认加载 ajax 内容的 DIV。
Once you have the ID, all you need to do is replace the HTML inside the DIV with your loading message. When the Ajax completes, it will replace it again for you with the actual content.
获得 ID 后，您需要做的就是用加载消息替换 DIV 中的 HTML。当 Ajax 完成时，它会再次为您替换为实际内容。
回答by shanabus
Balu, I recently needed to something similar. In my project, I wanted the tabs to retain the tab title, but append an ajax-loading type animation. Here is what I used:
Balu，我最近需要类似的东西。在我的项目中，我希望选项卡保留选项卡标题，但附加一个 ajax 加载类型的动画。这是我使用的：
$(".tabs").tabs({ spinner: '',
select: function(event, ui) {
$(".tabs li a .loader").remove();
$(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>");
},
load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
});
The "spinner" option removes the "Loading..." effect on click of the tab. The "select" event allows us to get the selected tab and append a new span containing the animation. Once the content has loaded we use the "load" event to remove the animation. To prevent multiple user clicks from destroying the tabs, we remove() all animations on any tab select.
单击选项卡时，“微调器”选项会删除“正在加载...”效果。“select”事件允许我们获取选定的选项卡并附加一个包含动画的新跨度。一旦内容加载完毕，我们就使用“load”事件来移除动画。为了防止多次用户点击破坏选项卡，我们 remove() 任何选项卡选择上的所有动画。
Did you already solve this issue? If so, please share the solution.
你已经解决了这个问题吗？如果是这样，请分享解决方案。
回答by Andreas Zwerger
In jQuery UI v1.12 you can use the beforeLoad Handler:
在 jQuery UI v1.12 中，您可以使用 beforeLoad 处理程序：
$('#tabs').tabs({
beforeLoad: function(event, ui) {
ui.panel.html('Loading')
}
});
