0

私のページにはいくつかのタブがあります...しかし、要件に従って、タブは中央近くのどこかに表示されます...そのため、タブの上にある部分はすぐに読み込まれ、部分の読み込みに時間がかかりますタブを含む...

メインページが読み込まれると、タブ内のすべてのページも読み込まれます...だから時間がかかります...どうすればこれを回避できますか...

私のコード:

<div class="ui-tabs" id="tabs" style="width: 97%;display:none;">
                    <ul class="ui-tabs-nav">
                        <li id="planDetails-tab"><a id="hrefPlanDetailsid" accesskey="p" href="#divPlanDetailsTab" class="planTabHeader">&nbsp;Plan Details</a></li>
                        <li id="testPlan-tab"><a id="hrefTestPlanid" accesskey="t" href="#divTestPlanTab" class="planTabHeader">&nbsp;&nbsp;Test Plan&nbsp;&nbsp;&nbsp;</a></li>                        
                        <li id="serviceArea-tab"><a href="#divServiceAreaTab" accesskey="s" class="planTabHeader">Service Area</a></li>
                        <li id="rates-tab"><a href="#divRatesTab" accesskey="r" class="planTabHeader">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li id="benefits-tab"><a href="#divBenefitsTab" accesskey="b" class="planTabHeader">&nbsp;&nbsp;&nbsp;&nbsp;Benefits&nbsp;&nbsp;&nbsp;</a></li>
                        <li id="network-tab"><a href="#divNetworkEcpTab" accesskey="n" class="planTabHeader">Network ECP</a></li>
                        <li id="historical-tab"><a href="#divHistoricalTab" accesskey="h" class="planTabHeader">&nbsp;&nbsp;Historical&nbsp;&nbsp;&nbsp;</a></li>
                        <li id="directory-tab"><a href="#divDirectoryTab" accesskey="d" class="planTabHeader">&nbsp;&nbsp;&nbsp;Directory&nbsp;&nbsp;</a></li>
                    </ul>

                    <div id="divPlanDetailsTab" style="width: 100%;">
                        <fieldset>
                            <s:include value="PlanDetail.jsp" />
                        </fieldset>
                    </div>
                    <div id="divTestPlanTab" style="width: 100%;">
                        <fieldset>
                            <s:include value="TestPlan.jsp" />
                        </fieldset>
                    </div>                  
                    <div id="divServiceAreaTab"
                        class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                        <fieldset>
                        <s:include value="PlanServiceArea.jsp" />
                        </fieldset>
                    </div>                  

                    <div id="divRatesTab"
                    class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                        <fieldset>
                        <s:include value="Rates.jsp" />
                        </fieldset>
                    </div>

                    <div id="divBenefitsTab" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                        <fieldset>
                        <s:include value="PlanBenefits.jsp" />
                        </fieldset>
                    </div>

                    <div id="divNetworkEcpTab"
                    class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                        <fieldset>
                        <s:include value="NetworkECP.jsp" />
                        </fieldset>
                    </div>

                    <div id="divHistoricalTab" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                    <fieldset>
                        <s:include value="PlanHistorical.jsp" />
                        </fieldset>
                    </div>
                    <div id="divDirectoryTab"
                    class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"  style="width: 100%;">
                        <fieldset>
                            <s:include value="ProviderDirectory.jsp" />
                        </fieldset>
                    </div>
            </div>

js ファイル:

$(function() {
            $tabs = $("#tabs").tabs();
            $tabs.css('display','block');

            //Initially hide Test Plan tab
            $('ul li#testPlan-tab').hide();
            $('#hrefTestPlanid').hide();
            $tabs.tabs({
                active : function(event, ui) {
                }
            });
        });
4

1 に答える 1

0

AJAX メソッドを使用してコンテンツの読み込みを使用するだけです: http://jqueryui.com/tabs/#ajax

そうすれば、おそらく表示されることのないテキストや要素を大量にロードすることはありません

ディレクトリ「ajax」を作成し、タブのコードを特定のファイルに移動し、次のようにタブを定義します。

<ul class="ui-tabs-nav">
    <li id="planDetails-tab"><a href="ajax/divPlanDetailsTab.php" id="hrefPlanDetailsid" accesskey="p" class="planTabHeader">&nbsp;Plan Details</a>
    </li>
    <li id="testPlan-tab"><a href="ajax/divTestPlanTab.php" id="hrefTestPlanid" accesskey="t" class="planTabHeader">&nbsp;&nbsp;Test Plan&nbsp;&nbsp;&nbsp;</a>
    </li>
    ...
</ul>

  <script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {

          ui.panel.html("Loading in progress...");

          ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
于 2013-03-26T06:46:11.183 に答える