JQuery UI Tabs缓存

Question

我在ASP .net MVC应用程序中工作.我有一个JQuery UI选项卡,其中启用缓存的Javascript如下所示.

function LoadStudentDetailTabs() {
    $('#tabStudentDetail').tabs({
        cache: true,
        spinner: '',
        select: function(event, ui) {

            $("#gridSpinnerStudentDetailTabs h5").text("Loading Details...");
            $('#tabStudentDetail > .ui-tabs-panel').hide();
            $("#gridSpinnerStudentDetailTabs").show();
        },
        load: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        },
        show: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        }
    });
}

我使用list1,tab2,tab3列表构建了三个选项卡项.

现在,当选项卡被构造时,它会启用所有选项卡项的cahing.但是,如何根据需要单独设置缓存到这些选项卡项.说(tab1缓存,tab2没有缓存,tab3缓存)我只能看到一种方法将缓存应用于整个选项卡,而不是根据需要将缓存应用于单个选项卡项.

我还需要动态地启用或禁用对这些选项卡项(tab1,tab2,tab3)的缓存.我怎样才能做到这一点.任何帮助,将不胜感激？

Answer 1

我最近也有这个用途.查看代码,它使用带有$ .data的 "cache.tabs" 来确定是否应该缓存选项卡.所以你只需要抓住元素并设置$.data(a, "cache.tabs", false);

假设标签是静态的,我创建了一个快速扩展来做到这一点.可能存在不可预见的问题,当然可以改进.

(function($) {
    $.extend($.ui.tabs.prototype, {
        _load25624: $.ui.tabs.prototype.load,
        itemOptions: [],
        load: function(index) {
            index = this._getIndex(index);

            var o = this.options,
                a = this.anchors.eq(index)[0];

            try {
                if(o.itemOptions[index].cache === false)
                    $.data(a, "cache.tabs", false);
            }
            catch(e) { }

            return this._load25624(index);
        }
    });
})(jQuery);

正如您所看到的,我将旧load方法分配给_load25624,只是一些随机名称,将其保留为对象的成员,并在load确定是否应该缓存选项卡后在新方法中调用它.用法:

$("#tabs").tabs({
    cache: true,
    itemOptions: [
        { cache: false }
    ]
});

将开启缓存整套项目,并关闭缓存只是第一项(索引0).

Answer 2

因此,简化Eric的分析,您可以通过在每个选项卡的anchor元素中设置'cache.tabs'数据来控制每个选项卡的缓存.

// disable cache by default
$("#tabs").tabs({
    cache: false,
});

然后,在第一次加载选项卡内容后,您可以为该选项卡启用缓存.我只想把它放在$(document).ready:

$(document).ready(function () {
    // cache content for the current tab
    var currentTabIndex = $("#tabs").tabs('option', 'selected');
    var currentTabAnchor = $("#tabs").data('tabs').anchors[currentTabIndex];
    $(currentTabAnchor).data('cache.tabs', true)
});

谢谢,埃里克!