Как манипулировать историей веб-страницы? - PullRequest
Новая
       8

Как манипулировать историей веб-страницы?

0 голосов
/ 24 марта 2010

Вот мое, что у меня 

<div id=A></div>
<div id=B></div>
<input type="button" value="ChangeA" onClick="createTableA();">
<input type="button" value="ChangeB" onClick="createTableB();">

Итак, в моем файле jsp я использую javascript и jQuery для динамического управления содержимым этих двух div. Например, если я нажму changeA, функция createTableA() будет динамически манипулировать <div id=A></div> и append таблицей. Поэтому мой вопрос: если я нажму changeA, затем нажму changeB, как я могу манипулировать историей, чтобы, если я нажму кнопку back, я вернулся к содержанию Table A

Ответы [ 4 ]

1 голос
/ 24 марта 2010

Я использовал плагин jQuery History только для такого рода вещей, и он работал очень хорошо для меня.

На каждую "страницу" ссылается хеш в вашемURL.Таким образом, «изменение страниц» не обновляет страницу, но сохраняет состояние страницы в истории и позволяет создавать закладки.

РЕДАКТИРОВАТЬ Я более подробно остановлюсь на примере, приведенном в ссылкеприменить больше для вашей ситуации. 

function loadTable(hash)
{
    if(hash == "ChangeA")
        createTableA();
    if(hash == "ChangeB")
        createTableB();
}
$(document).ready(function() {
    $.history.init(loadTable);
    $("input[id^='Change']").click(function(){
        $.history.load(this.attr('value'));
        return false;
    });
});

То, что делает приведенный выше код, устанавливает обработчик событий для всех тегов input, чей id начинается с «Изменить», так что при нажатии этих кнопок loadTableназывается.Если вы измените свои кнопки, чтобы они выглядели так: 

<input type="button" id="ChangeA" value="ChangeA">
<input type="button" id="ChangeB" value="ChangeB">

нажатие кнопки A поместит это http://www.example.com/yourpage.html#ChangeA в адресную строку и загрузит таблицу A, также добавив это изменение таблицы в историю браузера.

0 голосов
/ 24 марта 2010

YUI также имеет менеджер истории браузера: YUI3: http://developer.yahoo.com/yui/3/history/ или YUI 2: http://developer.yahoo.com/yui/history/

0 голосов
/ 24 марта 2010

Вы должны проверить Кнопка возврата и библиотека запросов Бена Алмана Отличный API для просмотра истории браузера и несколько хороших примеров для начала.

0 голосов
/ 24 марта 2010

Собственный объект location имеет свойство hash, которое можно использовать для навигации в приложениях AJAX / JS.

Вы можете использовать Плагин истории или Адресный плагин .

Адресный плагин обеспечивает большую гибкость и рекомендуется для более сложных приложений.

...