大佬教程收集整理的这篇文章主要介绍了jQuery选项卡 – 在ajax加载期间显示容器div中的指示符，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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容器中显示一个指示符.我试过以下,
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);
我用小例子测试了这个,在下面添加.
<!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>
<!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,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中的指示符全部内容，希望文章能够帮你解决jQuery选项卡 – 在ajax加载期间显示容器div中的指示符所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。