Jquery Mobile навигации с использованием разных панелей, ломает CSS - PullRequest
2 голосов
/ 25 мая 2011

У меня есть проблема, которую я не могу четко определить как проблему навигации или динамическое отображение проблемы с контентом. Во-первых, я использую одну HTML-страницу, которая содержит несколько страниц, где у меня есть две панели навигации для каждой страницы: верхний и нижний колонтитулы.

На первой странице отображается содержимое, которое динамически выбирается из php на сервере в виде объекта JSON с использованием getJSON () . Содержимое отображается как дочерний элемент трех складных элементов с использованием функции html () этих складных элементов. Содержимое заполняется в H1 и двух списках дочерних тегов складных элементов соответственно.

Моя верхняя панель навигации содержит три записи (стр. 1, стр. 2, стр. 3) . Когда я перехожу с page1 на page2 , затем нажимаю page1 запись с page2 , все работает, как ожидалось, т.е. , Я получаю page1 , как в первый раз, когда я оставил его.

Нижняя панель навигации - это меню glyphish с тремя страницами (page_a, page_b, page_c) . Проблема возникает, когда я перехожу на page_c из page1 , а затем я нажимаю ссылку page1 , чтобы вернуться назад (или даже когда я использую кнопку «назад» по умолчанию в JQM), CSS page1 не прерывает отображение ни панели навигации заголовка, ни первой сворачиваемой, а скорее объединяет содержимое первой сворачиваемой H1 с содержанием второго разборчиво смущающе.

Я использую listview () для обновления списочных представлений после их динамического заполнения (после каждого вызова функции PageShow ()).

У меня были разные попытки решить проблему, одна из которых использует page () на исчезающем сворачиваемом элементе, но это не сработало.

Полезно упомянуть, что я занимаюсь разработкой непосредственно на устройстве Blackberry Bold 9700 (где оно ломается!) В его браузере webkit; тем не менее, функциональность хорошо работает в настольных браузерах Firefox 4, Chrome и его расширении Ripple.

Если бы у кого-то была такая проблема и ей удалось ее решить, я был бы признателен за понимание / разрешение.

Приветствие.


[РЕДАКТИРОВАТЬ] по ссылке, предоставленной cpak, я добавил следующие правила CSS в свой собственный файл css, и ему удалось решить эту проблему.

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { height:0; overflow:hidden}

.ui-mobile .ui-page-active { display: block; overflow: visible; height:auto; min-height:100%;}

Затем я удалил все вышеперечисленные правила и использовал самую последнюю сборку JQM, которая решает проблему по умолчанию. Для тех, кто был там, я использовал v1.0a4.1 , когда столкнулся с проблемой, но, похоже, она исправлена ​​в самой последней версии JQM (от 24 мая)

1 Ответ

1 голос
/ 25 мая 2011

У меня была / была похожая проблема при переходе назад и вперед между страницей #home и другими страницами в Chrome и MobileSafari, но не в родном браузере Android. Нашел это несколько дней назад:

При использовании кнопки jQuery Mobile «Назад» в Safari и MobileSafari происходит сбой макета домашней страницы.

У меня еще не было времени попробовать его, но это может быть связано с тем, что вы испытываете.

[РЕДАКТИРОВАТЬ]: После перечитывания вашего вопроса я не уверен, что это поможет, но я все равно оставлю этот пост здесь, чтобы сообщество могло принять решение =)

...