jQuery tabs - отображать индикатор в контейнере div во время загрузки ajax - PullRequest
Новая
       43

jQuery tabs - отображать индикатор в контейнере div во время загрузки ajax

4 голосов
/ 15 февраля 2012

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 «content», когда я нажимаю или выбираю вкладку.Я попробовал следующее:

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

Но всякий раз, когда я нажимаю на вкладку, индикатор не отображается.Есть идеи почему?

Ответы [ 3 ]

4 голосов
/ 15 февраля 2012

Вы не вызывали 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>
1 голос
/ 27 февраля 2016

Виджет JQuery UI Tabs имеет специальное событие для этого beforeLoad .

Если вы посмотрите на официальную демонстрацию пользовательского интерфейса jQuery для Ajax , вы увидите, как это событие используется для обработки ошибок. И это также полезно для настройки содержимого во вкладках во время загрузки.

Вот фрагмент рабочего кода (в 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.");
      });
    }
  });
});
<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> и копируется в содержимое вкладки во время загрузки (которая будет автоматически заменена при загрузке вкладки).

1 голос
/ 03 августа 2012

Это не ответ на ваш конкретный вопрос, но я использовал следующее для достижения аналогичного результата: 

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