jQuery UI 选项卡：如何在不重新加载的情况下切换到（ajax）选项卡？答案

【问题标题】：jQuery UI Tabs: How to switch to a (ajax) tab without reloading it?jQuery UI 选项卡：如何在不重新加载的情况下切换到（ajax）选项卡？
【发布时间】：2013-06-22 02:53:47
【问题描述】：

当缓存保持禁用状态（即cache: false）时，如何防止选项卡再次加载远程内容？本质上，我想select 一个标签而不是load 它。

【问题讨论】：

你不能。这就是cache: true 的point。
这真的取决于 jQ UI Tabs 开发人员来决定他们希望这个框架有多大的灵活性。
那又怎样？他们没有给你那种灵活性，而且实施起来很重要——但也毫无意义。这是因为库必须使用与cache: true 一样的相同缓存行为，因为它无法（在切换之前）知道它是否会从服务器请求或缓存。以这种速度，您只需使用cache: true 并在您不想想要访问缓存时找到加载远程内容的方法。

标签： ajax jquery-ui tabs jquery-ui-tabs

【解决方案1】：

事实证明，您可以通过在每个选项卡的锚元素中设置“cache.tabs”数据来控制每个选项卡的缓存。

我在另一篇帖子中发布了答案：JQuery UI Tabs caching，但我将在这里重新发布代码。

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

【讨论】：

【解决方案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.");
                });
            }
        });
    });

【讨论】：

【解决方案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

【讨论】：