我正在使用jquery UI选项卡,并且加载到选项卡的内容位于另一个页面上。所以它是通过ajax加载的。页面加载之间存在一些延迟,在此期间,选项卡内容将加载的部分屏幕是完全空的。有没有办法在内容加载之前显示“loading ....”之类的消息?
我的代码是:
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="/failedPrescreenReport.jsp</a></li>
<li><a href="/failedverificationreport.jsp</a></li>
<li><a href="VerificationReport.action</a></li>
</ul>
</div>
我已尝试使用此插件的spinner选项,但这对我来说似乎不起作用...(也许我的css搞砸了)
答案 0 :(得分:10)
没有必要做额外的事情,只需添加 span 标签就可以了。我认为它在jQuery的文档中遗漏了。
示例:
<script type="text/javascript">
$(function(){
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li>
<li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li>
<li><a href="VerificationReport.action"><span>Tab 3</span></a></li>
</ul>
</div>
span 标签是重要的部分。
答案 1 :(得分:9)
我建议您监听jquery ajaxStart,ajaxStop和ajaxError事件,在ajaxStart上显示“加载”弹出窗口,将其隐藏在AjaxStop和ajaxError上。这样,只要ajax请求处于挂起状态而没有任何其他编程,您的加载弹出窗口就会显示。
例如:
$(function() {
$(this).ajaxStart(function() {
$("#ajaxLoading").show(); });
$(this).ajaxStop(function() {
$("#ajaxLoading").hide(); });
});
答案 2 :(得分:0)
最近写了jquery plugin,可能会有所帮助。它将一个带有微调器的掩码放在一个元素上,因此对于你的ajax调用,你可以在调用之前显示掩码,并在回调函数中取消屏蔽它。
答案 3 :(得分:0)
jquery blockui非常适合这一点。一个非常快速,优雅的解决方案。
答案 4 :(得分:0)
blockUI非常棒,但我谨慎http://plugins.jquery.com/project/loading更适合这种情况。
答案 5 :(得分:0)
我做的最好的事情只是为了ajax驱动标签...希望你会喜欢这个答案
$(“#facilityTabContainer”)。标签({ panelTemplate:“正在加载......”, 已选择:0, 可滚动:是的, cache:false});
你甚至可以修改jquery.ui.tabs中的panelTemplate,这样你应用程序中的所有选项卡都会自动获得“加载文本或图像”。 并猜测它也解决了你的第一个标签加载问题..