Я использую JQuery Mobile версии 4.1a и используя:
data-position="fixed"
как в верхнем, так и нижнем колонтитуле.
Когда я просматриваю содержимое, оно исчезает, а затем появляется снова.
Есть ли способ заставить его оставаться в этом положении и не исчезать каждый раз, когда я просматриваю страницу?
Спасибо
Я нашел решение. Я тестировал его в своем проекте, и он работает как шарм.
Вот URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
Это то же решение JS, которое используется в: AppML.
Кроме того, вот демо:
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
p.s: Он работает лучше на моем проекте, чем на их реальной демоверсии, поэтому стоит попробовать.
Наслаждайтесь: o)
Добавьте data-tap-toggle="false" к элементу
или
Добавьте это в Javascript
$("[data-role=header]").toolbar({ tapToggle: false });
Более старые версии jQuery используют .fixedtoolbar().
У меня были проблемы с jquery mobile iscroll в моем проекте. Возможно, некоторые из библиотек, которые я использовал, мешали друг другу (я использую нокаут и jquery.templates вместе с кучей других вещей). Решение, которое работало для меня, - это прокрутка jquery mobile scrollview. Демо можно посмотреть здесь.
http://jquerymobile.com/test/experiments/scrollview/
И код здесь
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/
вам нужно включить
Я использовал это недавно в мобильном проекте jQuery, и он отлично работает на iphone 3gs. На моем старом андроидском HTC magi это работает не так хорошо, но ни один из мобильных телефонов jquery не работает хорошо на этом устройстве. Обратите внимание, что scrollview находится в экспериментах и не добавлено в основной проект jQuery.
Если вам не повезло с iScroll или jquery mobile scrollview, инструментарий подмигивания - это еще один вариант.
http://www.winktoolkit.org/tutorials/119/
Как и iScroll, мне не удалось заставить это работать с моим конкретным проектом, но я не думаю, что я действительно очень старался.
<div data-role="footer" data-tap-toggle="false"
data-theme="c" id="footer" data-position="bottom" >
<h4 align="center" >copyright 2012 @KoshWTF</h4>
<p> </p>
</div>
P.S вы можете сделать это и для заголовка, если у вас возникнут проблемы с ним. приветствия
$(document).bind("mobileinit", function() {
$.support.touchOverflow = true;
$.mobile.touchOverflowEnabled = true;
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
Это работает. Протестировано в Android 2.3
Я хотел добавить комментарий к ответу Satch3000, но у меня не было возможности сделать это - не знаю почему. Я попробовал https://github.com/yappo/javascript-jquery.mobile.iscroll, но, к сожалению, он не работает с последними мобильными lib jcery (http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js)
добавьте в нижний колонтитул class="FixedFooter" и убедитесь, что вы удаляете data-position="fixed" из нижнего колонтитула.
добавьте это в свой <head>
<style type="text/css">
.fixedFooter {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}
приветствий.
$. mobile.fixedToolbars.setTouchToggleEnabled(false) не работал у меня, но редактирование файла javascript-jquery.mobile.iscroll, как следует, как представляется, решает проблему с решением iscroll, предложенным Satch3000, и запрашивается пользователем418775.
изменение линии (99)...
if ($.mobile.activePage.data( "iscroll" ) == "enable" ) {
чтобы...
if (($.mobile.activePage) && ($.mobile.activePage.data( "iscroll" ) == "enable" )) {
Я французский. Извините за мой английский;
Я исправляю эту проблему с помощью этого кода, но не совершенен (должен быть адаптирован к вашей ситуации):
$("body").live('scrollstart', function (event, ui) {
if ($(".divDel").length == 0) {
//prevents the offset
var taill = $("[data-role=header]").height();
$("[data-role=header]").after("<div class='divDel' style='height:" + taill + "px;'></div>");
$("[data-position=fixed]").css("display", "none");
}
}).live('vmouseup scrollstop', function (event, ui) {
$(".divDel").remove();
$("[data-position=fixed]").css("display", "block");
});
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
Это то, что сработало для меня:
Внутри функции ResizePageContentHeight() добавьте дополнительную строку:
$page.children('.ui-footer').css('position','fixed');
прямо перед:
$content.height(wh - (hh + fh) - (pt + pb))
Полный код: (Добавьте это в свой jquery.scrollview.js внизу)
function ResizePageContentHeight(page) {
var $page = $.mobile.activePage,
$content = $page.children( ".ui-content" ),
hh = $page.children( ".ui-header" ).outerHeight() || 0,
fh = $page.children( ".ui-footer" ).outerHeight() || 0,
pt = parseFloat($content.css( "padding-top" )),
pb = parseFloat($content.css( "padding-bottom" )),
wh = window.innerHeight;
$page.children('.ui-footer').css('position','fixed');
$content.height(wh - (hh + fh) - (pt + pb));
}
$( ":jqmData(role='page')" ).live( "pageshow", function(event) {
var $page = $( this );
$page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
$page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
var $this = $( this );
if ( $this.hasClass( "ui-scrolllistview" ) ) {
$this.scrolllistview();
} else {
var st = $this.jqmData( "scroll" ) + "",
paging = st && st.search(/^[xy]p$/) != -1,
dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
opts = {
direction: dir || undefined,
paging: paging || undefined,
scrollMethod: $this.jqmData("scroll-method") || undefined
};
$this.scrollview( opts );
}
});
ResizePageContentHeight( event.target );
});
$( window ).bind( "orientationchange", function( event ) {
ResizePageContentHeight( $( ".ui-page" ) );
});
Это очень просто.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
</div>
Это работает для меня.
Если вы все пробовали, и вы все еще пытаетесь исправить эту проблему (например, я был), попробуйте обновить мобильную версию jQuery. В v1.3.1 data-position="fixed" работает так, как должно быть из коробки. Я не видел этого предложения нигде, и это первое, что нужно проверить перед тем, как попробовать какой-либо код, поэтому я подумал, что упомянул об этом.
У меня была такая же проблема, я смог ее исправить, добавив следующий код преобразования в элемент фиксированной позиции (transform: translateZ(0);-webkit-transform: translateZ(0);), что заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройств (GPU)), чтобы заставить пиксели летать. С другой стороны, веб-приложения запускаются в контексте браузера, что позволяет программному обеспечению выполнять большинство (если не все) рендеринга, что приводит к меньшей мощности для переходов. Но Интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил 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);
}
В JQM 1.3.2 здесь находится мое решение
.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;
}$.mobile.fixedToolbars.setTouchToggleEnabled(false);
Это приведет к тому, что панели инструментов будут скрыты при нажатии/прикосновении к странице.