如何在加载jquery选项卡的内容之前显示"加载"

Question

我正在使用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>

我试过使用这个插件的微调器选项,但这对我来说似乎没有用...(也许我的css搞砸了)

Answer 1

没有必要做额外的东西,只需添加span标签insdie你的锚点.我认为它在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标签是重要的部分.

Answer 2

我建议听一下jquery ajaxStart,ajaxStop和ajaxError事件,在ajaxStart上显示你的"加载"弹出窗口,将它隐藏在AjaxStop和ajaxError上.这样,只要ajax请求处于挂起状态而没有任何其他编程,您的加载弹出窗口就会显示.

例如:

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });