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

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

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

РЕДАКТИРОВАТЬ: этот вопрос и мой ответ относятся к jquery mobile alpha 3


jquery templates jquery-mobile
person Bobby    schedule 19.02.2011    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Ладно, я понял. Если вы хотите добавить в 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();
person Bobby    schedule 19.02.2011
comment
Не могли бы вы создать JSFiddle для этого? У меня возникли проблемы с воспроизведением вашего метода. Я вижу в dom, что JQ Mobile, кажется, украшает мой шаблон всеми надлежащими атрибутами, как только я вызываю page(), но на самом деле ничего не появляется в окне браузера. - person Dusda; 05.08.2011
comment
Было бы здорово, если бы мы могли получить более подробную информацию о добавлении строки html в $.mobile.pageContainer. Я пытаюсь это сделать, но эта переменная всегда равна нулю, когда я добираюсь до нее. Нужно ли его инициализировать? - person Shaun Budhram; 03.11.2011

arrow_upward
2
arrow_downward

Копаю эту ветку. Используя 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")
person Skylar Saveland    schedule 21.02.2012
comment
Вместо того, чтобы говорить «последняя», поскольку эти темы живут долго, возможно, упомяните конкретную версию. :) Я предполагаю, что ваша последняя версия на тот момент была либо 1.0, либо одной из альфа-версий, предшествующих 1.1.0, тогда как 1.1.0rc1 была выпущена 28 февраля 2012 года. - person Adam Tuttle; 27.03.2012

arrow_upward
1
arrow_downward

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

person howldev    schedule 31.01.2012