Как создать горизонтальную вкладку jQuery, которая загружает страницу один раз

Question

Мне нужна горизонтальная панель вкладок jQuery (снимок экрана ниже), где нажатие на вкладку загружает внешнюю страницу в div, но нажатие на нее после загрузки не загружает страницу снова.

Есть 7 вкладок Wall, Latest, Discussion, Poll, Club Message, Create.

Демонстрацию можно посмотреть здесь http://www.web -shine.in / tabs /

Я хочу, чтобы вкладка загружала страницу один раз, и в следующий раз, когда пользователь нажимает на нее, она должна показывать страницу из кэша браузера, а не с сервера.

Как лучше всего это кодировать?

Answer 1

Используйте функцию one () .

Ex:

$("#foo").one("click", function() {
  alert("click can only be done once.");
});

UPDATE

Если вы пытаетесь кэшировать ответ Ajax, чтобы последующие запросы Ajax, которые соответствуют исходным параметрам Ajax, возвращали кэшированный ответ вместо нового вызова, тогда я настоятельно рекомендую использовать этот отличный плагин jQuery http://plugins.jquery.com/project/ajax-cache-response

Answer 2

Извините, если я ошибся, но;

$('#tabs').tabs({cache: true});

Этого достаточно.

Answer 3

Попробуйте что-то вроде этого:

var cache = {};

function loadTab(tabObj) {
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).fadeOut(100);

    var target = tabObj.attr('href');

    if (cache[target] !== undefined) {
        $(containerId).html(cache[target]);
        $(containerId).slideDown('medium');
        $(containerId).fadeIn('slow');
    } else {
        $(containerId).load(tabObj.attr('href'), function()
        {
            cache[target] = $(containerId).html();
            $(containerId).slideDown('medium');
            $(containerId).fadeIn('slow');
        });
    }
}

Answer 4

Попробуйте сделать AJAX-вызов в событии "show" на вкладках.Это должно срабатывать только при отображении вкладки (т. Е. При изменении выбранной вкладки).

http://docs.jquery.com/UI/Tabs#event-show

Answer 5

Все, что вам нужно сделать, это поместить этот пример в вызов AJAX:

http://jqueryui.com/demos/tabs/#manipulation