jQuery Mobile | Навигация между страницами

Я довольно новичок в JQM и пытаюсь создать мобильное приложение с использованием jQuery Mobile.

Ниже то, что я пытаюсь достичь..

У меня есть несколько страниц HTML, каждая из которых имеет свои страницы CSS, Javascript и JQM. Что мне нужно, так это когда я перехожу на другой html-файл и возвращаюсь на кнопку "назад" с помощью data-rel="back", я возвращаюсь к предыдущему html-файлу в том состоянии, в котором я его оставил.

Я попытался использовать функцию изменения pagecontainer, но он не загружает JavaScript в новый загруженный HTML-файл. Он попытался использовать следующий код.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("change", "tutorial.html", { 
        reload : true
    });
});

Также я попробовал другой вариант, который был загрузкой pagecontainer, но на этот раз он даже не перенаправил. Я использовал следующий код.

$( document ).on( "vclick", '.openTutorial', function(){
    $.mobile.pageContainer.pagecontainer("load", "tutorial.html", { });
});

Это достижимо в JQM.

Если да, то как мне перейти к другому html-файлу, чтобы загружались его javascript и css в голове. И когда я возвращаюсь, используя data-rel="back", предыдущее состояние восстанавливается.

Если нет, то как мне этого добиться. Я имею в виду, какие изменения я должен сделать..

Спасибо. Очень признателен за любую помощь.

Источник

2 ответа

Решение

Короткий ответ..

  • Ajax включен: нет, это невозможно.
  • Ajax Disabled: Да, это возможно.

подробности

Ajax включен:

Когда вы используете одностраничную модель, вы должны убедиться, что выполняете следующие пункты:

  1. Для каждого HTML поместите jQuery, jQM.css и jQM.js в head,
  2. Custom JS должен идти внутрь data-role=page дела.
  3. каждый data-role=page Div в отдельном файле HTML.

Примечание: jQM загружается ТОЛЬКО первым data-role=page div каждого HTML-файла в DOM. Что-нибудь снаружи data-role=page div игнорируется Вот почему Custom JS должен быть размещен внутри этого div.

Когда вы уходите со страницы (кроме самой первой загруженной страницы), jQuery Mobile удаляет эту страницу из DOM. Если вы не кешируете это, добавляя data-dom-cache="true" в data-role=page дела. Страница удалена из DOM, однако CSS и JS кэшируются. Чтобы удалить их, вам необходимо полностью обновить / перезагрузить страницу.

Следовательно, при переходе от pageX.html к pageY.html через Ajax, если вы переопределяете CSS в pageZ, они будут применены к pageX (если вы использовали те же селекторы).

Чтобы безопасно переопределить CSS разных страниц, создайте пользовательские классы и addClass() / removeClass() в зависимости от страницы. Или используйте #pageID селектор, чтобы быть более конкретным при переопределении CSS. То же самое относится и к JS, вы должны быть конкретными при использовании событий страницы.

Ajax отключен:

Вы можете делать все, что захотите, сайт будет использовать HTTP, а не Ajax.

демонстрация

Источник

Не уверен, что вы можете восстановить предыдущее состояние с помощью нескольких файлов HTML.

Вы должны использовать многостраничный шаблон JQM и установить все ваши HTML в одном файле с каждой страницей в div с data-role="page" и определенным идентификатором:

<div data-role="page" id="foo">
</div>
<div data-role="page" id="bar">
</div>

При этом вы сможете сохранять состояние каждой страницы.

Документация JQM: http://demos.jquerymobile.com/1.4.2/pages/

Источник
Другие вопросы по тегам