Динамическое создание страниц jQuery Mobile с использованием шаблонов jQuery - PullRequest
Новая
       4

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

13 голосов
/ 19 февраля 2011

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

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

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

Ответы [ 3 ]

9 голосов
/ 19 февраля 2011

Хорошо, я понял. Если вы хотите добавить A в DOM, вы также должны добавить значение для data-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 голосов
/ 21 февраля 2012

Гравировка этой темы Используя 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")
1 голос
/ 31 января 2012

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

...