加载选项卡的内容以缩短页面加载

时间:2015-12-21 14:11:48

标签: jquery ajax jquery-ui

我使用jQuery UI选项卡使用JS和jQuery在每个选项卡中嵌入不同的社交窗口小部件。我试图重建脚本以缩短页面加载,因为现在jQuery UI选项卡在页面开始时从所有选项卡加载所有外部JS文件。我想在点击时加载活动标签的内容。

这可能吗?

JSFIDDLE

$(document).ready(function() {

  //When page loads...
  $(".tab-content").hide(); //Hide all content
  $(".tabs tab-links a:first").addClass("active").show(); //Activate first tab
  $(".tabs .tab-content:first").show(); //Show first tab content

  //On Click Event
  $(".tabs .tab-links a").click(function() {

    $(".tabs .tab-content .tab").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tabs .tab-content .tab").hide(); //Hide all tab content

    var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content

    if ($(activeTab).html() == '') {
      $.ajax({
        url: '/url/to/post',
        type: 'post',
        dataType: 'html',
        success: function(content) {
          $(activeTab).html(content);
        }
      });
    }

    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
  });

});

2 个答案:

答案 0 :(得分:0)

你可能想要这样的......

$(document).ready(function() {

$( ".selector" ).tabs({

  activate: function( event, ui ) {
    // put code here to see if tab is loaded if not, load it.
  }

});
// then add code here to load the first tab.




});

答案 1 :(得分:0)

这对我有用。就像我能得到它一样简单。它使用选项卡号和相关的div id来确定要加载的文件以及它进入的div。

我为每个调用fragment0.html,fragment1.hml和fragment2.html创建了3个内容html文件。

select X.ITEMCODE,X.[ITEM_DESCRIPTION], X.[OPENING_BALANCE],   X.[SALES], X.[TOTAL_REJECTS], 
 X.[REJECTION_DISEASES], X.[DOCDATE]

        from
        (  
        SELECT DISTINCT T0.ItemCode AS ITEMCODE, T0.ItemName AS [ITEM_DESCRIPTION],

        ISNULL((SELECT SUM(T1.OnHand) FROM OITW T1 WHERE  T1.WhsCode = 'FGS' AND 
        T1.ItemCode = T0.ItemCode),0) AS [OPENING_BALANCE],
        ISNULL((SELECT SUM(T1.[Quantity]) FROM INV1 T1 WHERE   T0.[ItemCode] = T1.[ItemCode]),0) AS [SALES] , 
        (SELECT top 1 T1.[DocDate] FROM INV1 T1 WHERE T1.DocDate BETWEEN {?FromDate} AND {?ToDate}  AND  T0.[ItemCode] = T1.[ItemCode]) AS [DOCDATE],

        ISNULL((SELECT SUM(cast(T1.[Quantity] as int))  FROM IGE1 T1 WHERE T1.DocDate BETWEEN {?FromDate} AND {?ToDate}  AND T0.[ItemCode] = T1.[ItemCode]),0) AS [TOTAL_REJECTS],
        Isnull((SELECT TOP 1 T1.[U_RejectionOthers] 
        FROM   ige1 T1 
        WHERE  T0.[itemcode] = T1.[itemcode]
        ), 0) AS [REJECTION_DISEASES]

        from OITM T0 where T0.[ItmsGrpCod] in ('104','121','122','123','124','125','126','127','129','130','134','135','136','139','140','141','142','143','144','145')
        ) X