SyA*_*yAu 4 jquery jquery-ui jquery-ui-tabs
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);
但是，每当我单击选项卡时，指示器都不会显示。知道为什么吗？
您还没有在选项卡选择中调用任何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>
| 归档时间： |
|
| 查看次数： |
6330 次 |
| 最近记录： |