如何缓存jquery ui选项卡数据？

我正在使用ajax在tab select上呈现用户控件

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();

            $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
        }
    });

---

如何防止选项卡在每次单击选项卡时再次加载远程内容。

如果您只想加载一次选项卡内容，那么我建议您立即将其包含在HTML中，而不是通过Ajax加载。

取决于您是要停止Ajax加载期还是仅当内容发生更改时。下面是一个仅加载新内容的示例，否则只需替换为JS var即可，该JS var检查函数是否在没有哈希的情况下被调用：

您可以散列结果并将其存储在本地，然后在成功处理程序中检查：

---

最简单的方法是使用标志让选项卡知道是否已加载。例如，使用$'tabsResult'.html

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();
            if(!$('#tabsResult').html())
            {
              $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
            }
});

---

我没有将jQueryUI选项卡与jQueryUI-Ajax一起使用，我使用MS-Ajax加载更新面板，这些面板是选项卡控件的窗格。因此，我的建议可能无法直接帮助您，我无法轻松为您检查。然而

jQueryUI选项卡已经有一个标志，告诉您该选项卡是否已加载。标记位于每个选项卡的DIV上，状态为false、loaded、loading、error等。您可以在HTML中看到它，或者使用下面类似的方式将其拉出。我用这些标志将标签重新标记为脏标签之类的东西。状态为第一次加载选项卡时加载，之后加载

show: function (event, ui) {
   var $target = $('#tabs > div:eq(' + ui.index + ')');
   console.log('tab id=' + $target.attr('id') + ' loaded=' + $target.attr('loaded'));
}

---

我喜欢这样做，只是为了代码的可读性。。。。你可以直接打开ui.index，但是你必须记住“哪个索引是XXX选项卡？”。这可能稍微慢一点，但在我看来，代码可读性显著提高

tabM = $('#tabs-detail').tabs({
    'select': function (event, ui) {
      var tabId = $($('>ul li a', this)[ui.index]).attr('href');
      switch (tabId) {
        case '#tabs-detail-sales':
          //no action needed
          break;
        case '#tabs-detail-activities':
          //need to populate a table with related activities
          if ($('#table-activities tbody tr').length === 0) {
              //load code goes here
          }
       }
    }
});

tabM = $('#tabs-detail').tabs({
    'select': function (event, ui) {
      var tabId = $($('>ul li a', this)[ui.index]).attr('href');
      switch (tabId) {
        case '#tabs-detail-sales':
          //no action needed
          break;
        case '#tabs-detail-activities':
          //need to populate a table with related activities
          if ($('#table-activities tbody tr').length === 0) {
              //load code goes here
          }
       }
    }
});