显示带有自定义选项卡的旋转器

Showing spinner with custom tabs

本文关键字:旋转 选项 自定义 显示      更新时间:2023-09-26
$('#widget .tabs li a').click(function (e) {
        $('#widget .tabs li').removeClass('ui-tabs-active');
        $(this).parent().addClass('ui-tabs-active');
        $('.group-tabContent').hide();
        var url = $(this).attr('href');
        $('.group-tabContent').empty().load(url);
        $('.group-tabContent').show();
        return false;
    });
});

. .工作很好,但我想显示一个旋转器,而页面加载,我在哪里插入它?

在factory函数的顶部添加如下内容:
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("ajax-loader-reference").animate({});
});

其中"ajax-loader-reference"是你的类/id/元素对加载器的引用

要在新内容加载时做一些事情,更新$('.group-tabContent').empty().load(url);行并包含完整的函数处理程序(参见jQuery参考:http://api.jquery.com/load/如果提供了"complete"回调,则在后处理和HTML插入完成后执行。对于jQuery集合中的每个元素触发一次回调,并依次设置为每个DOM元素。):

// add show spinner code here
...
// make request for content
$('.group-tabContent').empty().load(url, function(response, status, xhr){
    // done loading content, now hide spinner
    ...
});