Как исправить фиксированный нижний колонтитул jQuery Mobile? - PullRequest
Новая
       20

Как исправить фиксированный нижний колонтитул jQuery Mobile?

18 голосов
/ 07 декабря 2010

Используя jQueryMobile, я включил data-role="footer" data-position="fixed" в разметку, но две ошибки сохраняются:

  • Нижний колонтитул переключается при событии нулевого щелчка.
  • Нижний колонтитул не исправлени скрывает часть содержимого страницы.

Я тестирую с iPhone 3g.Есть идеи?

Заранее спасибо.

ОБНОВЛЕНИЕ : Похоже, что событие click изменяет нижний колонтитул текущей страницы и изменяет ui-fixed-overlay на ui-fixed-inline, чтоконечно, стилизован display:none для предотвращения появления нижних колонтитулов других страниц.

Как я могу предотвратить эту модификацию?

Ответы [ 9 ]

25 голосов
/ 25 января 2012

Если используется 1.1 или более поздняя версия , добавьте data-tap-toggle="false" к верхнему и нижнему колонтитулам, как указано здесь .

Если вы используете версию jQuery Mobile до версии 1.1 , перед загрузкой jQuery Mobile укажите следующее: 

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove
14 голосов
/ 06 марта 2012

Это исправлено в jQueryMobile 1.1 rc1. Смотрите здесь .

Используйте data-tap-toggle = "false" в нижнем колонтитуле.

2 голосов
/ 31 января 2012

Текущий «ответ» может быть немного ошибочным.Использование TouchOverflow может помочь вам в краткосрочной перспективе, но это скоро уйдет.Если бы кто-нибудь прочитал jQuery mobile blog , он бы заметил, что это объявление, опубликованное 10 января:

Heads up: touchOverflow устарело в 1.1 - Когда мы впервые представилифункцию touchOverflow мы рассматривали как хороший способ использовать встроенную поддержку переполнения в iOS, чтобы обеспечить действительно фиксированные панели инструментов и более плавные переходы, даже если это было для довольно узкого набора устройств в то время.Теперь, со значительными изменениями в фиксированных заголовках и переходом, запланированными для 1.1, они улучшат работу почти так же, как touchOverflow, за исключением того, что он будет работать на гораздо большем количестве платформ и с меньшей сложностью, поэтому мы решили отказаться от этой функции.Это будет устарело в 1.1 и удалено в 1.2.У нас есть планы на будущее по устранению областей переполнения с помощью внутренней прокрутки, поэтому большая часть работы, которую мы проделали над touchOverflow, будет переназначена.

Извините за публикацию этого ответа, но яневозможно прокомментировать на этом этапе.

2 голосов
/ 03 апреля 2011

С jquery.mobile-1.0a4 добавление data-position = "fixed" в раздел нижнего колонтитула работает должным образом в Iphone, Android и Chrome

1 голос
/ 18 августа 2012

Я сделал очень простую вещь. Нашел решение с помощью CSS, просто установив правильную «минимальную высоту» для контента. Он остановит переход нижнего колонтитула на содержимое страницы.

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

У нас была эта проблема, и мы использовали комбинацию iScroll (v3) и красивой мобильной оболочки jquery для iScroll. Работает отлично. Смотрите все детали здесь:

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

0 голосов
/ 12 августа 2017

Re: Нижний колонтитул не исправлен и скрывает часть содержимого страницы.

Я тоже боролся с этой проблемой.Оказалось, что мне нужно переместить тег div конечного содержимого, чтобы он ДО ПЕРЕД началом нижнего колонтитула.Если нижний колонтитул находится внутри тега div содержимого - и вы включаете >>> data-position = "fixed" <<<, то мой нижний колонтитул не фиксируется.</p>

Я не знаю о вашей другой проблеме: «Нижний колонтитул переключается на событие нулевого щелчка», так как я не знаю, как воссоздать его в моем приложении..

  • JQuery Mobile 1.3.2
  • Cordova
  • В нижнем колонтитуле есть навигационная панель и рекламный баннер.
0 голосов
/ 11 февраля 2014

Я использую jquery mobile 1.3.1, и все, что вы сказали ранее, не работает в моем приложении.но у меня есть решение для этой ошибки.проверьте мой другой пост JQueryMobile - фиксированный нижний колонтитул не исправлен после фокуса ввода 

$('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();
        });
});
0 голосов
/ 07 декабря 2010

У меня была похожая проблема с нижним колонтитулом, который также не был исправлен на свитке. Мое предложение? Сенча, а не jQueryMobile, он загружен ошибками и не готов к производству.

Нижний колонтитул также выделяет выбранную страницу из URL / # URL-адрес страницы влияет на меню нижнего колонтитула в моем случае.

...