jQuery tabs - Display indicator in the container d

2019-05-05 11:17发布

站内问答 / jQuery
1814 3 6

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?

3条回答
爷、活的狠高调
2楼-- · 2019-05-05 11:39

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

查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2019-05-05 11:45

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>
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-05-05 11:48

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(); }});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)