选项卡上的引导预加载器

Question

我正在使用一些局部视图和 ajax 调用来加载下一个选项卡，有时局部的问题有很多内容必须在服务器端完成，我需要一些解决方案，在该元素之前显示预加载器收集所有数据。

这是引导选项卡的简单示例，有人可以帮我添加一些预加载器，但就在那个地方，而不是整个页面。成为一些 CSS 预加载器会很高兴

这是我的工作小提琴，我删除了服务器端代码，以便更好地理解

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 选项卡中有微调器选项，引导程序也有吗？

Answer 1

如果你使用 jquery，我使用这个插件http://malsup.com/jquery/block/#overview，然后设置一个加载 gif 图像以在阻塞 html 中设置。我的例子就像

$(element).block({ message: '<h5><img src="/images/loader.gif" style="margin-right: 5px;" />loading...</h5>" });

本网站可以创建一个图像供您下载和使用。 http://www.ajaxload.info/ 这允许您指定显示加载图像的确切区域

Answer 2

您可以监听shown.bs.tab 事件和添加/删除类loading 类。您可以根据需要使用loading 类自定义此选项卡。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var $target = $($(e.target).attr('href'));
    $target.addClass('loading');

    // example of async content loading
    setTimeout(function() {
        $target.html(data[$target[0].id]);

        // once data is loaded remove class
        $target.removeClass('loading');
    }, 1000);
});

演示：http://jsfiddle.net/DTcHh/2550/