Вкладки пользовательского интерфейса jQuery: как перейти на вкладку (ajax), не перезагружая ее?

Question

Когда кэширование остается отключенным (т. Е. cache: false), как я могу запретить вкладке снова загружать удаленный контент? По сути, я хотел бы select вкладка, но не load это.

Answer 1

Оказывается, что вы можете управлять кэшированием каждой вкладки, установив данные 'cache.tabs' в элементе привязки каждой вкладки.

Я разместил ответ в другом посте: JQuery UI Кэширование вкладок , но я просто перепостил код здесь.

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

Answer 2

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Answer 3

... следуйте URL-адресу вкладки вместо загрузки ее содержимого через ajax

Обратите внимание, что открытие вкладки в новом окне является неожиданным, например, непоследовательное поведение, раскрывающее проблему юзабилити (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    }
});

По: http://jqueryui.com/demos/tabs/#...immediately_select_a_just_added_tab