jQuery Мобильная страница / структура навигации

Question

В настоящее время я оцениваю комбинацию jQuery Mobile и PhoneGap.Для моего приложения мне нужна своего рода модель навигации «внутреннего приложения»: фиксированный заголовок, который содержит элементы для переключения между различными контекстами и функциями, и весь регион ниже, который зависит от того, какая функция выбрана.Пример: пользователь выбирает клиента и затем может переключаться между различными представлениями данных и статистики, относящимися к этому клиенту.Кроме того, пользователь может переключаться между различными клиентами, сохраняя при этом один и тот же вид.Каждая функция / представление может снова представлять собой довольно сложную конструкцию из нескольких страниц со своей собственной навигацией.

Мне кажется, я уже понимаю основные идеи jQuery Mobile, но я не уверен, как реализовать это "правильно".путь".

• Я мог бы сделать это, просто закодировав весь заголовок с навигацией на каждую страницу, но это кажется очень плохой идеей - много избыточного кода, много мест для вставки крошечных ошибок, которыеочень трудно найти.
• Я мог бы попытаться добавить все элементы пользовательского интерфейса для разных представлений на одну страницу, скрыть их и отобразить только те, которые принадлежат текущей функции.Это тоже не правильно - я подозреваю, что DOM будет очень большим, и я подозреваю, что это может вызвать различные проблемы (производительность).
• Я мог бы попытаться создать содержимое страницы, которое зависит отфункционировать динамически, используя методы манипуляции DOM JQuery.Это звучит как хорошая идея, но отдельные страницы могут быть очень сложными, и я беспокоюсь, что генерация большого количества сложного HTML-кода с использованием JavaScript приведет к неуправляемому фрагменту кода.
• Я мог бы попытаться объединитьподходы - кодировать отдельные страницы в файле HTML, а затем каким-то образом «связать» их в соответствующем месте с помощью манипуляций с DOM - но я никогда этого не делал, и я не уверен, смогу ли я заставить это работать.
• Я мог бы попытаться поместить страницу сведений в iframe - это сработало бы вообще?

Каков наилучший / канонический способ реализации такого рода приложений?Знаете ли вы какие-либо учебники или примеры?

Answer 1

Просто отсоедините ваш заголовок и затем присоедините его к новой странице. Например:

$footer = $("#myfooter");
$header = $("#myheader");

$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');

$.mobile.changePage('#newpage');

Отсоединение не убивает все ваши обработчики кнопок / и т. Д. Вам нужно будет отслеживать, на какой странице вы находитесь, или смотреть на location.hash, чтобы делать разные вещи в зависимости от того, какая страница отображается.

- Грег Фрейм
Thex Interactive
www.thexinteractive.com

Answer 2

Первый способ - самый простой.Так я и сделал.Также это дает вам свободу добавлять кнопки, специфичные для того, что находится в области просмотра для этой страницы.
Второй подход будет иметь множество дополнительных вызовов, которые вы не хотите.Остальные подходы не стоят усилий.