3

タブのコンテンツが画面に表示される前に読み込み中の画像を表示する方法??? 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>
4

1 に答える 1

3

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を参照してください。

于 2012-06-14T21:01:36.200 に答える