twitter-bootstrap 使用 ajax 加载内容时在 Bootstrap 选项卡之间显示微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24528779/
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
Showing spinner between Bootstrap tabs when loading content with ajax
提问by akd
I am using bootstrap 3 tabs and using ajax to load the content of each tab on tabbed.
我正在使用 bootstrap 3 选项卡并使用 ajax 加载选项卡上每个选项卡的内容。
But sometimes it takes time to load up the content when the server gets slower. Therefore, I would like to put a spinner in the tab content until the server returns the tab content back.
但有时当服务器变慢时加载内容需要时间。因此，我想在选项卡内容中放置一个微调器，直到服务器返回选项卡内容。
First of all, is there a built-in easy option to achieve this?( Fade effect is not what I am looking for.)
首先，是否有内置的简单选项来实现这一点？（淡入淡出效果不是我想要的。）
If there is not an built-in function to use should I just place a div inside the content and hide/show it when the ajax returns result back?
如果没有要使用的内置函数，我应该在内容中放置一个 div 并在 ajax 返回结果时隐藏/显示它吗？
Or I should not repeat myself and I should use jquery to place the div element in the active tab and replace it when the ajax done?
或者我不应该重复自己，我应该使用 jquery 将 div 元素放在活动选项卡中并在 ajax 完成后替换它？
What would be the best option?
最好的选择是什么？
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home"> <div class="spinner"></div> </div>
<div class="tab-pane" id="profile"><div class="spinner"></div></div>
<div class="tab-pane" id="messages"><div class="spinner"></div></div>
</div>
Here is the ajax query to update content of each tab
这是更新每个选项卡内容的ajax查询
$('.nav-tabs a').click(function (e) {
e.preventDefault();
if ($(this).closest('li').is('.active')) { //stop sending another query when tab active
return;
}
var ts = +new Date();
var tabUrlAddress = $(this).attr("data-url") + '?timestamp=' + ts;
var href = this.hash;
var pane = $(this);
pane.show();
$(href).load(tabUrlAddress, function (result) {
});
});
采纳答案by DavidG
As yo are using jQuery.load, you can modify your code like this:
当jQuery.load您使用时，您可以像这样修改您的代码：
First add a loading div to the page. I usually do something like this:
首先向页面添加一个加载div。我通常做这样的事情：
<div class="loading">
<img src="/images/loading.gif" />
<div>Loading</div>
</div>
Give it some CSS to float it to the middle of the screen, style it and initially hide it:
给它一些 CSS 使其浮动到屏幕中间，设置样式并最初隐藏它：
.loading {
display: none;
position: fixed;
top: 350px;
left: 50%;
margin-top: -96px;
margin-left: -96px;
background-color: #ccc;
opacity: .85;
border-radius: 25px;
width: 192px;
height: 192px;
z-index: 99999;
}
Then modify your ajax Javascript:
然后修改你的ajax Javascript：
$('.nav-tabs a').click(function (e) {
e.preventDefault();
if ($(this).closest('li').is('.active')) { //stop sending another query when tab active
return;
}
var ts = +new Date();
var tabUrlAddress = $(this).attr("data-url") + '?timestamp=' + ts;
var href = this.hash;
var pane = $(this);
pane.show();
//Show the loader
$(".loading").show();
$(href).load(tabUrlAddress, function (result) {
//Hide when complete
$(".loading").hide();
});
});
