当禁用缓存时，可以通过设置每个标签的'cache.tabs'数据来控制其缓存行为。首次加载标签内容后，可以启用该标签的缓存。可以通过在$(document).ready中设置当前选中标签的缓存状态。另外，可以使用beforeLoad回调函数检查标签是否已加载，如果已加载则阻止重新加载，并设置ajax请求不缓存。还可以通过监听标签选择事件，当选择标签但不加载内容。
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
When the caching remains disabled (i.e. cache: false), how can I prevent the tab from loading the remote content again? Essentially, I would like to select a tab but not load it.
回答1:
It turns out that you can control the caching of each tab by setting the 'cache.tabs' data in each tab's anchor element.
I posted the answer in another post: JQuery UI Tabs caching, but I'll just repost the code here.
// disable cache by default
$("#tabs").tabs({
cache: false,
});
Then after the tab content has been loaded for the first time, you can enable the caching for that tab. I simply put it in the $(document).ready for the page to be cached:
$(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('
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:
...follow a tab's URL instead of loading its content via ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (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;
}
});
By: http://jqueryui.com/demos/tabs/#...immediately_select_a_just_added_tab
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
