显示带有自定义选项卡的微调框

Question

$('#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; 
    }); 
}); 

..效果很好，但我想在页面加载时显示微调，我在哪里插入它？

Answer 1

在你的工厂函数的顶部添加这样的事情：
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("ajax-loader-reference").animate({});
});
其中“Ajax-loader在参考”为你的类/ ID /元素参考装载机

Answer 2

要做些什么，而新的内容加载，更新行$('.group-tabContent').empty().load(url);，并包含完整的函数处理程序（请参阅jQuery参考：http://api.jquery.com/load/）如果提供了“完整”回调，则会在执行后处理和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 
    ... 

});