Исправлены панель инструментов и панель нижнего колонтитула JQuery Mobile? - PullRequest
Новая
       43

Исправлены панель инструментов и панель нижнего колонтитула JQuery Mobile?

62 голосов
/ 23 апреля 2011

Я использую JQuery Mobile версии 4.1a и использую: 

data-position="fixed"

в верхнем и нижнем колонтитуле.

При прокрутке содержимого оно исчезает, а затем снова появляется.

Есть ли способ заставить его оставаться на своем месте и не исчезать при каждой прокрутке страницы?

Спасибо

Ответы [ 15 ]

1 голос
/ 12 августа 2011

$. Mobile.fixedToolbars.setTouchToggleEnabled (false) у меня не сработало, но редактирование файла javascript-jquery.mobile.iscroll следующим образом, похоже, решает проблему с решением iscroll, предложенным Satch3000 и запрошенным user418775.

изменение строки (99) ...

if ($ .mobile.activePage.data ("iscroll") == "enable") {

до ...

if (($ .mobile.activePage) && ($ .mobile.activePage.data ("iscroll") == "enable")) {

0 голосов
/ 17 февраля 2016

На JQM 1.3.2 вот мое решение

  1. Добавить data-tap-toggle = "false" в фиксированный верхний / нижний колонтитул
  2. Добавьте CSS ниже, чтобы переопределить JQM CSS 

.ui-header-fixed.ui-fixed-hidden,
.ui-footer-fixed.ui-fixed-hidden{
	position: fixed !important;
}

header.ui-panel-animate {
	-webkit-transition: none !important;
}

header.slidedown.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slidedown.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

header.slideup.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.ui-panel-animate {
	-webkit-transition: none !important;
}

footer.slidedown.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slidedown.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.out.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.in.reverse {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.out {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}

footer.slideup.in {
	-webkit-transform: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0ms !important;
	transform: none !important;
	animation-name: none !important;
	animation-duration: 0ms !important;
}
0 голосов
/ 19 сентября 2014

У меня была та же проблема, я смог ее исправить, добавив следующий код преобразования к элементу с фиксированной позицией (transform: translateZ(0);-webkit-transform: translateZ(0);), который заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройства (графическому процессору) ) чтобы пиксели летали. С другой стороны, веб-приложения выполняются в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, что приводит к меньшей мощности для переходов. Но Интернет догонял, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

Использование -webkit-transform: translate3d (0,0,0); активирует GPU для переходов CSS, делая их более плавными (более высокий FPS).

Примечание: translate3d (0,0,0) ничего не делает с точки зрения того, что вы видите. он перемещает объект на 0px по осям x, y и z. Это всего лишь техника форсирования аппаратного ускорения. 

#element {
    position: fixed;
    ...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
0 голосов
/ 25 мая 2013

Если вы все перепробовали и все еще пытаетесь решить эту проблему (как я), попробуйте обновить мобильную версию jQuery.В v1.3.1 data-position="fixed" работает так, как должно из коробки.Я нигде не видел этого предложения, и это первое, что нужно проверить, прежде чем пытаться написать какой-либо код, поэтому я решил упомянуть его.

0 голосов
/ 09 августа 2011 
$.mobile.fixedToolbars.setTouchToggleEnabled(false);

Это остановит скрытие панелей инструментов, когда вы нажимаете / касаетесь страницы.

Страница:
...