bottom - JQuery Mobile Fixed Toolbar y Footer Bar desaparecen?
jquery mobile bottom menu (15)
Estoy usando JQuery Mobile versión 4.1a y estoy usando:
data-position="fixed"
tanto en el encabezado como en el pie de página.
Cuando me desplazo por el contenido, desaparece y luego aparece de nuevo.
¿Hay alguna forma de que permanezca en su posición y no desaparezca cada vez que me desplazo por la página?
Gracias
$ .mobile.fixedToolbars.setTouchToggleEnabled (false) no funcionó, pero la edición del archivo javascript-jquery.mobile.iscroll de la siguiente manera parece resolver el problema con la solución iscroll propuesta por Satch3000 y consultada por user418775.
cambiando la línea (99) ...
if ($ .mobile.activePage.data ("iscroll") == "enable") {
a...
if (($ .mobile.activePage) && ($ .mobile.activePage.data ("iscroll") == "enable")) {
Agregar data-tap-toggle="false" al elemento
o
Agregar esto a Javascript
$("[data-role=header]").toolbar({ tapToggle: false });
Las versiones anteriores de jQuery usan .fixedtoolbar() .
En JQM 1.3.2 aquí está mi solución
- Agregar datos-tap-toggle = "false" al encabezado / pie de página fijo
- Agregue el CSS a continuación para anular el 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;
}
En caso de que hayas intentado todo y sigas teniendo problemas para solucionar este problema (como yo), intenta actualizar tu versión móvil de jQuery. En v1.3.1 data-position="fixed" funciona como debería ser desde el primer momento. Vi esta sugerencia en ninguna parte y es lo primero que debo verificar antes de probar cualquier código, así que pensé en mencionarlo.
Encontré una solución. Lo probé en mi proyecto y funciona como un encanto.
Aquí está la URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
Es la misma solución JS utilizada por: AppML.
Además, aquí hay una demostración:
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
PD: Funciona mejor en mi proyecto que en su demo real, así que vale la pena intentarlo.
Disfruta: o)
Es muy sencillo.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
</div>
Esto funciona para mi.
Estaba teniendo el mismo problema, pude solucionarlo agregando el siguiente código de transformación al elemento de posición fijo, ( transform: translateZ(0);-webkit-transform: translateZ(0); ) que obliga al navegador a usar aceleración de hardware para acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software haga la mayoría (si no todas) de la representación, lo que resulta en menos caballos de fuerza para las transiciones. Pero la Web se ha puesto al día, y la mayoría de los proveedores de navegadores ahora ofrecen aceleración gráfica de hardware mediante reglas de CSS particulares.
Usando -webkit-transform: translate3d (0,0,0); pondrá en marcha la GPU en acción para las transiciones CSS, haciéndolas más suaves (FPS más altas).
Nota: translate3d (0,0,0) no hace nada en términos de lo que ves. mueve el objeto por 0px en los ejes x, yyz. Es solo una técnica para forzar la aceleración del hardware.
#element {
position: fixed;
...
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Esto es lo que me ha funcionado:
Dentro de la función ResizePageContentHeight() agrega una línea adicional:
$page.children(''.ui-footer'').css(''position'',''fixed'');
justo antes de:
$content.height(wh - (hh + fh) - (pt + pb))
Código completo: (Agregue esto en su jquery.scrollview.js en la parte inferior)
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" ) );
});
Quería agregar un comentario a la respuesta de Satch3000, pero no tenía la opción de hacerlo, no estoy seguro de por qué. Intenté https://github.com/yappo/javascript-jquery.mobile.iscroll , pero desafortunadamente no funciona con las últimas librerías jquery mobile (http://code.jquery.com/mobile/1.0b1/jquery .mobile-1.0b1.min.js)
Soy francés Lo siento por mi inglés;
Arreglo este problema con este código pero no es perfecto (debe adaptarse a su situación):
$("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);
Tuve problemas con jquery mobile iscroll en mi proyecto. Tal vez algunas de las bibliotecas que estaba usando estaban interfiriendo entre sí (estoy usando knockout y jquery.templates junto con un montón de otras cosas). Una solución que funcionó para mí fue la vista de desplazamiento móvil jquery. Las demostraciones se pueden ver aquí.
http://jquerymobile.com/test/experiments/scrollview/
Y el código está aquí
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/
necesitas incluir
- jquery.easing.1.3.js
- jquery.mobile.scrollview.js
- jquery.mobile.scrollview.css
- scrollview.js
Lo he usado recientemente en un proyecto móvil de jquery y funciona muy bien en iphone 3gs. En mi viejo HTC mago HTC, no funciona muy bien, pero ninguno de JQuery móvil funciona bien en ese dispositivo. Tenga en cuenta que la vista de desplazamiento está experimentando y no se ha agregado al proyecto principal de jquery mobile.
Si no tiene suerte con iScroll o jquery mobile scrollview, el wink toolkit es otra opción.
http://www.winktoolkit.org/tutorials/119/
Al igual que iScroll, no pude hacer que esto funcionara con mi proyecto en particular, pero no creo que realmente lo haya intentado tan duro.
agregue a su class="FixedFooter" pie de página class="FixedFooter" y asegúrese de eliminar data-position="fixed" de su pie de página.
agregue esto a su <head>
<style type="text/css">
.fixedFooter {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}
aclamaciones.
$(document).bind("mobileinit", function() {
$.support.touchOverflow = true;
$.mobile.touchOverflowEnabled = true;
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
Esto funciona. Probado en Android 2.3
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
Esto evitará que las barras de herramientas se oculten cuando haga clic / toque la página.
<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>
PD: también puedes hacer eso para el encabezado si tienes algún problema con él. aclamaciones