如何在选项卡内容加载时显示加载图像？

Question

如何在我的选项卡内容在屏幕上可见之前显示加载图像？ 我在我的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>

- ashish

Answer 1

在ajaxOptions中添加更多选项，可以根据AJAX调用的路由隐藏或显示加载器。

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html();
            },
            beforeSend: function() {
                $('#loader').show();
            },
            complete: function() {
                $("#loader").hide();
            }
        }
    });
});​

然后您可以在页面上创建/设置加载器的样式：

<div id="loader" style="display:none">Loading...</div>

请查看http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings获取更多选项

- r0m4n

---

谢谢您的回复。我已经使用了它，但是它没有正常工作。我在页面上看不到任何“加载中...”的内容。所以您能否对其进行修改。谢谢。 - ashish

谢谢，我的问题已经解决了。现在我想把那个选项卡的颜色改成天蓝色。你能帮我找到答案吗？拜托了。 - ashish

最好的选择是使用不同的jQuery UI主题！从主题生成器开始，按照您的喜好进行配置... http://jsfiddle.net/CQYSa/1/ - r0m4n