jQuery选项卡 – 在ajax加载期间显示容器div中的指示符

jQuery 1.7.1，jQuery UI选项卡。 我有以下代表标签的HTML，

 
 
Gallery
 
Polls
 
Events
 
 
  

当我单击或选择选项卡时，我需要在’content’div容器中显示一个指示符。 我试过以下，

HTML

JavaScript的

 $.ajaxSetup({ cache:false, beforeSend: function() { $('#ind').show() }, complete: function(){ $('#ind').hide() }, success: function() {} }); 

这正在使用以下选项卡选择代码，我执行该代码以在页面加载时选择默认选项卡，

 var $tabs = $('#tabs').tabs(); $tabs.tabs('select', 1); 

但每当我点击标签时，指示灯都不会显示。 知道为什么吗？

Answer 1

您没有在标签选择中调用任何ajax。

如果您通过ajax调用选项卡内容，该指示符将显示。

我用小例子测试了这个，在下面添加。

               
 
 
 
Preloaded
 
Tab 1
 
Tab 2
 
Tab 3 (slow)
 
Tab 4 (broken)
 
 
 
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
 
 
   

带有额外JQuery插件的新代码

              
 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
 
   

Answer 2

这不是您的具体问题的答案，但我使用以下内容来实现类似的结果：

 $('#loading_indicator').show(); $('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); }, load: function(event, ui) { $('#loading_indicator').hide(); }}); 

Answer 3

jQuery UI Tabs小部件有一个名为beforeLoad的特定事件。

如果您查看Ajax的官方jQuery UI演示，您将看到该事件如何用于处理错误。 并且在加载时设置选项卡内的内容也很有用。

这是工作代码片段（JS中只有一个重要的行，HTML中有3行）：

 $(function() { $("#tabs").tabs({ beforeLoad: function( event, ui ) { ui.panel.html($('#ind').clone()); // the only line one I added to the official sample ui.jqXHR.fail(function() { ui.panel.html("ERROR: Couldn't load this tab."); }); } }); }); 

    
 
 
Preloaded
 
Tab 1
 
Tab 2
 
Tab 3 (broken)
 
 
 
Preloaded tab content