jQuery选项卡-在Ajax加载期间在容器div中显示指示器 [英] jQuery tabs - Display indicator in the container div during ajax load
本文介绍了jQuery选项卡-在Ajax加载期间在容器div中显示指示器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
jQuery 1.7.1，jQuery UI选项卡.我有以下HTML表示标签，
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>
当我单击或选择选项卡时，需要在'content'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
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?
推荐答案
在选项卡选择中尚未调用任何ajax.
You haven't call any ajax in tab selection.
如果您要通过ajax调用标签页内容，则会显示该指示符.
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>
带有额外的JQuery插件的新代码
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>
这篇关于jQuery选项卡-在Ajax加载期间在容器div中显示指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
