我正在使用 bootstrap 3 选项卡并使用 ajax 加载选项卡上每个选项卡的内容。
但有时,当服务器变慢时,加载内容需要一些时间。因此,我想在选项卡内容中放置一个微调器,直到服务器返回选项卡内容。
首先,是否有一个内置的简单选项可以实现此目的?(淡入淡出效果不是我想要的。)
如果没有内置函数可供使用,我是否应该在内容中放置一个 div 并在 ajax 返回结果时隐藏/显示它?
或者我不应该重复自己,我应该使用 jquery 将 div 元素放置在事件选项卡中并在 ajax 完成时替换它?
最好的选择是什么?
<!-- 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>
这是更新每个选项卡内容的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) {
});
});
最佳答案
当您使用jQuery.load
时,您可以像这样修改代码:
首先在页面中添加一个加载div。我通常会做这样的事情:
<div class="loading">
<img src="/images/loading.gif" />
<div>Loading</div>
</div>
给它一些 CSS 让它 float 到屏幕中间,设置它的样式并最初隐藏它:
.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;
}
然后修改你的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();
});
});
关于jquery - 使用 ajax 加载内容时在 Bootstrap 选项卡之间显示微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24528779/