Как исправить jQuery Mobile фиксированный нижний колонтитул?
Используя jQueryMobile, я включил data-role="footer" data-position="fixed"
в разметку, но сохраняются две ошибки:
- Нижний колонтитул переключается на событие с нулевым щелчком.
- Нижний колонтитул не фиксирован и скрывает часть содержимого страницы.
Я тестирую iPhone 3g. Любые идеи?
Спасибо заранее.
UPDATE. Похоже, что событие click изменяет текущий нижний колонтитул страницы и изменяет ui-fixed-overlay
на ui-fixed-inline
, который, конечно, имеет стиль display:none
, чтобы предотвратить нижние колонтитулы других страниц появляться.
Как предотвратить эту модификацию?
Ответы
Ответ 1
Если вы используете 1.1 или более поздней, добавьте data-tap-toggle="false"
в свой верхний и нижний колонтитулы, как описанный здесь.
Если вы используете версию jQuery Mobile до версии 1.1, поместите следующее перед загрузкой jQuery Mobile:
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true;
}); // remove
Ответ 2
Это исправлено в jQueryMobile 1.1 rc1. См. здесь.
Используйте data-tap-toggle = "false" на нижнем колонтитуле.
Ответ 3
С jquery.mobile-1.0a4 добавление данных-position = "fixed" в нижний колонтитул работает по желанию в Iphone, Android и Chrome
Ответ 4
Текущий "ответ" может быть немного ошибочным. Использование touchOverflow может помочь вам в краткосрочной перспективе, но это скоро исчезнет. Если кто-то должен был прочитать jQuery mobile blog, они заметили бы эту рекламную кампанию, опубликованную 10 января:
Heads up: touchOverflow, чтобы устареть в 1.1 - Когда мы сначала представила функцию touchOverflow, мы видели это как хороший способ использовать встроенную поддержку переполнения в iOS, чтобы обеспечить истинное фиксированное панелей инструментов и более плавных переходов, даже если это было довольно узкое набор устройств в то время. Теперь со значительными изменениями в фиксированном заголовков и переходов, запланированных на 1.1, это улучшит опыт практически идентичен методу touchOverflow, за исключением того, что он будет работать на гораздо более платформ и с меньшей сложностью, поэтому мы решили для выхода из этой функции. Он будет устаревшим в 1,1 и будет удален в 1.2. У нас есть планы на будущее по переполнению регионов с внутренней прокруткой, поэтому большая часть работы, выполненной на touchOverflow будут повторно назначены.
Извините, что разместил это как ответ, но я не могу комментировать этот момент.
Ответ 5
У нас была эта проблема и использовалась комбинация iScroll (v3) и симпатичной мобильной оболочки jQuery для iScroll. Он работает отлично. Подробнее см. Здесь:
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
Ответ 6
Я сделал очень простую вещь. Основанное решение с CSS просто установило правильную "минимальную высоту" для контента. Это остановит нижний колонтитул, прыгающий по содержимому страницы.
Ответ 7
У меня была аналогичная проблема с нижним колонтитулом, который не фиксируется на прокрутке. Мое предложение? Sencha, а не jQueryMobile, его загружают с ошибками и не готовы к производству.
Нижний колонтитул также выделяет выбранную страницу из URL/# страницы. URL-адрес влияет на меню нижнего колонтитула в моем случае.
Ответ 8
Я использую jquery mobile 1.3.1, и все, что вы сказали ранее, не работает в моем приложении. но у меня есть решение для этой ошибки. проверьте мой другой пост JQueryMobile - фиксированный footer не исправлен после фокуса ввода
$('div:jqmData(role="page")').on('pageinit',function(){
$(document)
.on('focus','input, select, textarea', function(){
$('[data-role="footer"][data-position="fixed"]').hide();
})
.on('blur','input, select, textarea',function(){
$('[data-role="footer"][data-position="fixed"]').show();
});
});
Ответ 9
Re: Нижний колонтитул не фиксирован и скрывает часть содержимого страницы.
Я тоже боролся с этой проблемой.
Оказалось, что мне нужно было переместить конечный тег div div контента до начала нижнего колонтитула. Если нижний колонтитул находится внутри тега div контента, и вы включаете → > data-position = "fixed" < < < lt;, то мой нижний колонтитул не фиксирован.
Я не знаю о вашей другой проблеме, "Footer переключается на событие с нулевым щелчком", поскольку я не знаю, как воссоздать это в моем приложении.
ИСПОЛЬЗОВАНИЕ...
- JQuery Mobile 1.3.2
- Кордова
- В нижнем колонтитуле есть панель навигации и рекламный баннер.