Я относительно новичок в jQuery Mobile. Итак, я не знаю каждого уголка возможностей фреймворка.
В настоящее время я сталкиваюсь с некоторыми проблемами с историей и динамической навигацией по страницам.
В принципе, я хочу добиться следующего:
У меня есть веб-страница, которая меняет содержимое нажатием кнопки. «Домашняя» страница должна отображать <div data-role="page" id="list_root">...</div>. Нажав кнопку, страница должна перейти к <div data-role="page" id="list_123">...</div>. Я хочу иметь возможность вернуться к содержимому div "#list_root" с помощью кнопки "Назад".
До использования jQuery я реализовал это самостоятельно с помощью history.pushState(divContent, null, "#list_<id>") и заменил старый контент новым. Однако плагин pushState деактивирован по умолчанию с помощью jQuery mobile.
Кнопка, которая нажимается для навигации, определяется следующим образом:
<a href='#list_<id>' class='...'>...</a>
Я попытался реализовать создание нового содержимого div (для list_), реализовав обратный вызов для «onhashchange». Но это событие никогда не вызывается.
Кроме того, если бы я мог создать содержимое при нажатии на ссылку, я хотел бы показать содержимое <div id="list_<id>">, заменив предыдущее содержимое.
Поскольку приложение представляет массовые данные, я не хотел использовать вложенный список мобильных телефонов jQuery.
Есть ли у вас какие-либо подсказки для меня, как я могу реализовать это, используя функциональность фреймворка?
ИЗМЕНИТЬ:
У меня следующая ситуация:
<div data-role="page" class="type-interior" id="main_window">
<div id="current" class="ui-content" data-role="content" role="main">
<div id="list_root" data-url="list_root">
<div id="list_123" data-url="list_123" data-role="page">
</div>
</div>
Как вы видите, «list_root» является «стартовой страницей» по умолчанию и отображается так, как предполагалось.
Я добавил прослушиватель событий для click() для динамического создания содержимого <div id="list_123"> через:
document.addEventListener('click', function(e) {
... create it ...
e.stopPropagation();
}, true)
Это работает.
Кнопка создается следующим образом:
<a href="#list_123" data-role="button">List_123</a>
Содержимое div успешно создано, и после этого хэш в URL изменится на #list_123. Но страница не отображается. Проблема в том, что <div data-role="page" id="list_123">...</div> стоит внутри тега <div data-role="page" class="type-interior" id="main_window">? Я попробую это дальше!
