我正在使用一些部分 View 和ajax调用来加载下一个选项卡,问题有时部分有很多必须在服务器端完成的内容,我需要的是一些解决方案,该解决方案将在该元素内显示预加载器所有数据均已收集。
这是引导选项卡的简单示例,有人可以帮助我添加一些预加载器,但只是在该位置内,而不是在整个页面上。如果能成为 CSS 预加载器就好了
这是我的工作 fiddle ,我删除了服务器端代码,以便更好地理解
http://jsfiddle.net/DTcHh/2548/
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
我知道 Jquery UI 选项卡中有微调选项,bootstrap 也有吗?
最佳答案
如果你使用jquery我使用这个插件http://malsup.com/jquery/block/#overview然后设置要在阻止 html 中设置的加载 gif 图像。我的例子就像
$(element).block({ message: '<h5><img src="/images/loader.gif" style="margin-right: 5px;" />loading...</h5>" });
此站点可以创建图像供您下载和使用。 http://www.ajaxload.info/这允许您指定确切的区域来显示加载图像
关于jquery - 选项卡上的引导预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27403230/