Динамическое создание jQuery мобильных страниц с использованием шаблонов jQuery

Я создаю каталог тренировок, используя jquery mobile для шаблонов пользовательского интерфейса и jquery для работы с html. Я смог добавить html к уже созданной странице и получить jquery mobile для изменения разметки благодаря функции .page().

Тем не менее, я хочу иметь возможность создавать новые мобильные страницы jq. Я могу вводить код в divs с ролью data-role = page, называть его .page(), и все это нормально. Но добавление полностью созданной страницы в тело не работает.

EDIT: Этот вопрос и мой ответ относятся к jQuery mobile alpha 3

Ответ 1

Хорошо, я понял. Если вы хотите добавить a в DOM, вы также должны добавить значение для URL-адреса данных. Когда вы создаете статическую html-страницу,

<div data-role="page" id="home">

jQuery mobile автоматически добавляет URL-адрес данных, равный идентификатору, который вы ему даете. Когда вы делаете это самостоятельно, вы должны держать его за руку и передать ему data-url = "home".

Когда вы создаете свою строку html, добавьте ее в $.mobile.pageContainer, поэтому jQuery Mobile знает, где ее найти (добавление ее к телу тоже работает, но, вероятно, лучше не качать лодку). После этого вызовите .page() на своей странице в DOM, чтобы jQuery mobile делал все магическое волшебство <span>, чтобы сделать его довольно.

$('#home').page();

Ответ 2

Мотивировка этой темы. Используя jQuery mobile (1.1.0), это работало для меня, .trigger("create")...

    content = '<div data-role="page" id="myID" data-url="myID">'
    // ...
    $('body').append(content).trigger("create")
    $("<a href='#myID' data-rel='dialog'/>").trigger("click")

Ответ 3

когда вы вызываете $('#home').page(); вы запрашиваете jQuery для улучшения вашего div с помощью специальной таблицы стилей и js-функций. Страница уже присутствует в DOM, но для ее отображения вы должны позвонить $.mobile.changePage("#home",options). для получения дополнительной информации (и конкретных объектов) см. http://jquerymobile.com/test/docs/api/methods.html