Добавить историю в jQuery ajax - PullRequest
Новая
       10

Добавить историю в jQuery ajax

1 голос
/ 09 января 2011

Я не могу понять, как добавить функциональность плагина истории в мой (действительно простой) код AJAX.

Вот мой код: 

$(function() {

    $.ajaxSetup({ cache: true });
    var hijax = $('ul.hijax a');
    var loader = $('<div id="spinner"></div>');
    hijax.click(function(e){
      hijax.removeClass('ajax-on');
        $(this).addClass('ajax-on');
        var url = $(this).attr('href') + ' #biog-container';
        $("#ajax-container").html(loader).load(url);
        e.preventDefault();
    });
});

Это вытягивает содержимое связанной страницы, содержащей div с идентификатором 'biog-container' (список имен со ссылками на биографии людей - это сайт для оркестра в стиле барокко!).

Ajax-вызовы прекрасно работают (ура, jQuery!), Но я гуглил и гуглял насчет добавления поддержки для плагина истории и (тупой фронтенд, я), я просто не могу понять это.

Спасибо за помощь.

1 Ответ

1 голос
/ 10 января 2011

Вы можете создать глобальный массив, удерживая элементы нажатыми через скрипт.Нажимайте элементы при каждом щелчке, но при этом последний элемент НЕ будет возвращенпредставляет текущую страницу), потяните другой элемент и нажмите на него.

Этот код не проверен!: 

$(function() {
    var links = new Array(),
    hijax = $('ul.hijax a'),
    loader = $('<div id="spinner"></div>'),
    container = $('#ajax-container'),
    content = container.html();

    $.ajaxSetup({ cache: true });

    hijax.click(function(e){
        var $this = $(this),
        url = $this.attr('href') + ' #biog-container';

        e.preventDefault();
        links.push($this);

        hijax.removeClass('ajax-on');
        $this.addClass('ajax-on');
        container.html(loader).load(url);
    });

    $('#back-button').click(function(e){
        var link;
        e.preventDefault();

        if (links.length > 1) {
            // This represents the current link
            links.pop();
            // This represents the past link
            link = links.pop();
            link.click();
        }
        else {
            // This may be empty, or represent the current content
            links.pop();
            // Show the original content
            container.html(content);
        }
    });
});
...