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

jQuery 1.7.1，jQuery UI选项卡。我代表选项卡下面的HTML，jQuery选项卡 - 在ajax加载期间在容器div中显示指示器

<div id="tabs"> 
    <ul> 
     <li><a href="t1" title="content">Gallery</a></li> 
     <li><a href="t2" title="content">Polls</a></li> 
     <li><a href="t3" title="content">Events</a></li> 
    </ul> 
<div id="content"></div> 
</div>

我需要显示在“内容”的div容器的指示灯，当我点击或选择的选项卡。我尝试以下，

HTML

<div id="content"><img id="ind" src="images/indicator.gif" 
alt="Loading..." style="display:none"/></div>

的JavaScript

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

这正与下面的选项卡中选择的代码，这是我执行选择默认选项卡页面加载时，

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

但是，只要我点击标签，指示器不会显示。任何想法为什么？

来源

2012-02-15 SyAu

你没有在选项卡中调用任何ajax。

如果您通过ajax调用标签内容，该指标将显示。

我已经用小例子测试过了，下面添加了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Load Demo</title> 
<link rel="stylesheet" href="demos.css"> 
<link rel="stylesheet" href="jquery.ui.tabs.css"> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.ui.core.js"></script> 
<script type="text/javascript" src="jquery.ui.widget.js"></script> 
<script type="text/javascript" src="jquery.ui.tabs.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajaxSetup({ 
    cache:false, 
    beforeSend: function() { 
     $('#ind').show() 
    }, 
    complete: function(){ 
     $('#ind').hide() 
    }, 
    success: function() {} 
    }); 

    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
        "If this wouldn't be a demo."); 
      } 
     } 
    }); 

}); 
</script> 
</head> 

<body> 
<div id="content" style="border:1px solid red"><img id="ind" src="images/indicator.gif" alt="Loading..." style="display:none"/></div> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Preloaded</a></li> 
     <li><a href="load.php?url=http://www.google.com">Tab 1</a></li> 
     <li><a href="load.php?url=http://www.yahoo.com">Tab 2</a></li> 
     <li><a href="load.php?url=http://www.msn.com">Tab 3 (slow)</a></li> 
     <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>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.</p> 
    </div> 
</div> 

</body> 
</html>

新的额外的jQuery插件

<!DOCTYPE html> 
<html lang="en"> 
<!-- 

    Created using/
    Source can be edited via /iwajir/8/edit 

--> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
<script class="jsbin" src="http://malsup.github.com/jquery.blockUI.js"></script> 

    <meta charset="utf-8"> 
    <title>jQuery UI Tabs - Content via Ajax</title> 
    <script> 
    $.ajaxSetup({ 
     cache:false, 
     beforeSend: function() { 
      $('#content').block({ 
       message: '<img id="ind" src="images/indicator.gif" alt="Loading..." style="border: 1px solid red"/>', 
       css: { 
         width: '100%', 
         width: '100%', 
         padding: '5px', 
         backgroundColor: '#FFF', 
         '-webkit-border-radius': '10px', 
         '-moz-border-radius': '10px', 
         color: '#000' 
        } 
      }); 
     }, 
     complete: function(){ 

     }, 
      success: function() {} 
     }); 

    $(function() { 
     $("#tabs").tabs({ 
      ajaxOptions: { 
       success:function() 
       { 
        $('#content').unblock(); 
       }, 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
       } 
      } 
     }); 



    }); 
    </script> 
</head> 
<body> 
<div id="tabs" style="position:relative"> 
    <ul> 
     <li><a href="http://jsbin.com/ewoyos/2" title="content">Tab 1</a></li> 
     <li><a href="http://jsbin.com/imakug/3" title="content">Tab 2</a></li> 
     <li><a href="http://jsbin.com/ayocul" title="content">Tab 3</a></li> 
    </ul> 
    <div id="content" style="border: 1px solid red"></div> 
</div> 


</body> 
</html>

来源

2012-02-15 06:27:20

我使用ID为'content'的div作为ajax内容将被加载的容器。请检查[this]（http://jqueryui.com/demos/tabs/#ajax）。我想在该标签下方的容器div（id - content）中显示该指标。我的锚定标记href指向struts操作名称，当单击tab时，ajax请求发送到服务器，并将响应内容加载到'content'div中。问题是点击标签后，我想显示指标，并在ajax内容加载之前隐藏指标。 – SyAu 2012-02-15 23:05:34

你可以分享URL以获得更好的主意吗？ – 2012-02-16 05:09:47

请参阅[本]（http://jsbin.com/iwajir/8）。我可以看到带有'content'div的指标gif在第一次显示'content'div的html被ajax内容覆盖后显示。所以后来的标签点击没有指示器gif显示。我相信我的理解是正确的。 – SyAu 2012-02-16 06:15:56

代码这是不是一个回答您的具体问题，但我用下面来实现类似的结果：

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

来源

2012-08-03 00:02:29 Tom

jQuery的UI选项卡窗口小部件有一个特定事件，称为beforeLoad。

如果你看看the official jQuery UI demo for Ajax，你会看到如何使用该事件来处理错误。而且在加载时设置标签内的内容也很有用。

这里是工作的代码段（存在JS仅有1重要线和3线在HTML）：

$(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."); 
 
     }); 
 
    } 
 
    }); 
 
});

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Preloaded</a></li> 
 
    <li><a href="https://rawgit.com/jquery/jquery-ui/master/tests/unit/tabs/data/test.html">Tab 1</a></li> 
 
    <li><a href="https://hub.github.com/hub.1.html">Tab 2</a></li> 
 
    <li><a href="http://google.com/not-found-ajax-content">Tab 3 (broken)</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Preloaded tab content</p> 
 
    </div> 
 
</div> 
 
<!-- important lines below (the HTML of the loading indicator) --> 
 
<div style="display:none"> 
 
    <img id="ind" src="http://www.ajaxload.info/images/exemples/1.gif" alt="Loading..."/> 
 
</div>

注意，负载指示器在内部的HTML 隐藏<div>它在加载时被复制到标签内容中（加载标签后会立即被替换）。

来源

2016-02-27 20:43:59

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

回答

相关问题