当前位置： 文江博客话题详情

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

发布于 2025-01-05 05:47:38 字数 994 浏览 5 评论 0原文

jQuery 1.7.1，jQuery UI 选项卡。我有以下表示选项卡的 HTML，

<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);

但每当我单击该选项卡时，指示器都不会显示。知道为什么吗？

原文

jQuery 1.7.1, jQuery UI tabs. I have the following HTML representing tabs,

<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>

I need to show an indicator in the 'content' div container when I click or select the tab. I tried the following,

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() {}
});

This is working with the following tab select code, which I execute to select a default tab when the page loads,

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

But whenever i click on the tab, indicator is not displaying. Any idea why?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

榆西 2025-01-12 05:47:39

这不是您具体问题的答案，但我使用以下方法获得了类似的结果：

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

This isn't an answer to your specific question but I used the following to achieve a similar result:

$('#loading_indicator').show();
$('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); },
                 load:   function(event, ui) { $('#loading_indicator').hide(); }});
回复 原文
时光倒影 2025-01-12 05:47:39

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

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

这是工作代码片段（JS 中只有 1 行重要的行，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.");
      });
    }
  });
});
<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 中，并且在加载时将其复制到选项卡内容中（一旦选项卡被打开，它将自动替换）已加载）。

The jQuery UI Tabs widget has a specific event called beforeLoad for that.

If you look at the official jQuery UI demo for Ajax you will see how that event is used for handling errors. And it's also useful for setting content inside the tabs while loading.

Here is the working code snippet (there is just 1 important line in JS and 3 lines in 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>

Notice that the loading indicator is in the HTML inside a hidden <div> and it's copied inside the tab content while loading (which will be automatically replaced as soon as tab is loaded).

回复 原文
眸中客 2025-01-12 05:47:38

您尚未在选项卡选择中调用任何 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>

You haven't call any ajax in tab selection.

if you are calling tab content by ajax that indicator will display.

I have test this with small example, added below.

<!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>

New Code with extra JQuery Plugin

<!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>
回复 原文
~没有更多了~

关于作者

九局

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文