JQuery UI 选项卡缓存

问题描述

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

I am working in an ASP .net MVC Application. I have a JQuery UI tab whose Javascript to enable caching is as follows.

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();
        }
    });
}

我使用一个列表构建了三个选项卡项，例如 tab1、tab2、tab3.

I constructed three tab items using a list say tab1, tab2, tab3.

现在发生的情况是，当标签被构建时，它会为所有标签项启用缓存.但是如何根据需要单独设置这些选项卡项的缓存.说(tab1 缓存，tab2 无缓存，tab3 缓存)我只能看到一种将缓存应用于整个选项卡而不是根据需要将缓存应用于单个选项卡项的方法.

Now what happens is when the tab is contructed it enables cahing for all the tab items. But how can I individually set caching to these tab items as needed. Say (tab1 cache, tab2 no cache, tab3 cache) I can only see a way to apply caching to the entire tab rather than applying caching to individual tab items as needed.

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

There is also a need for me to enable or disable caching to these tab items (tab1, tab2, tab3) dynamically. How can I achieve this. any help would be appreciated?

推荐答案

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

I recently had a use for this as well. Looking into the code, it uses "cache.tabs" with $.data to determine if a tab should be cached. So you just need to grab the element, and set $.data(a, "cache.tabs", false);

我创建了一个快速扩展来做到这一点，假设选项卡是静态的.可能存在无法预料的问题，当然可以改进.

I created a quick extension to do just that, assuming the tabs are static. There may be unforseen issues, and can certainly be improved.

(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 方法在确定是否应缓存选项卡后.用法:

As you can see I assign the old load method to _load25624, just some random name, keeping it as a member of the object, and call it in the new load method after having determined if the tab should be cached. Usage:

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

将为整个项目集打开缓存，并仅对第一个项目(索引 0)关闭缓存.

Will turn on cache for the entire set of items, and turn off cache for just the first item (index 0).

这篇关于JQuery UI 选项卡缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！