如何在我的选项卡内容在屏幕上可见之前显示加载图像?
我在我的visualforce页面上放置了4个选项卡。现在的问题是,当我点击选项卡时,它需要很长时间,所以我想在我的选项卡内容出现在屏幕上之前显示一个加载图像。
我使用jquery制作了我的选项卡。 我在这里提供我的代码,请帮我解决这个问题。
谢谢。
<apex:page standardController="Account" extensions="TempExt" id="pg">
<link rel="stylesheet" href="http://jqueryui.com/themes/cupertino/jquery.ui.all.css"/>
<script src="http://jqueryui.com/jquery-1.7.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"/>
<script src="/soap/ajax/10.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/10.0/apex.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.YU,'YU/build/container/assets/container.css')}"></link>
<script type="text/javascript" src="{!URLFOR($Resource.jquery,'Jquery.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.Jeditable,'jeditable.js')}"></script>
<style>
.rich-tabpanel-content{background:none;}
</style>
<script language="javascript" >
$(function () {
$("#tabs").tabs({
ajaxOptions : {
error : function (xhr, status, index, anchor)
{
$(anchor.hash).html();
}
}
});
});
</script>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="/apex/page1?id={!record.Id}">tab1</a></li>
<li><a href="/apex/page2?id={!record.Id}">tab2</a></li>
<li><a href="/apex/page3?id={!record.Id}" >tab3</a></li>
<li><a href="/apex/page4?id={!record.Id}" >tab4</a></li>
</ul>
</div>
</div><!-- End demo -->
</apex:page>