jQuery-UI选项卡 - 只加载一次

Question

我想通过AJAX获取我的选项卡的加载内容,但只在第一个选项卡上单击.现在,每次单击任何选项卡时都会加载选项卡.这可能吗 ？

我的HTML

<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>

编辑

我无法使用缓存选项,因为选项卡中的内容可能会更改..

Answer 1

$(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/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...');
                ui.jqXHR.done(function() {
                    ui.tab.data( "loaded", true );
                });
                ui.jqXHR.fail(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Answer 2

您可以在执行 load() 后隐藏()或删除()链接。或者，如果您想允许多次刷新选项卡内容，您可以删除第一次加载的内容并重新加载（）。

您还可以更改链接标记的 ID 并添加可依赖的辅助行为。