jQuery Mobile 및 고정 바닥 글

PhoneGap에 포장 된 jQuery 모바일 앱이 있습니다. 고정 된 바닥 글과 머리글을 사용하고 바닥 글에 문제가 발생했습니다. X 길이의 콘텐츠가 있고 클릭 한 후 내용이 작을 경우 - 바닥 글이 위로 이동하고 화면 하단에 붙지 않습니다. 화면을 클릭하면 원래 위치로 돌아갑니다.jQuery Mobile 및 고정 바닥 글

왜 그런가?

내 바닥 글 코드는 다음과 같습니다

<div data-role="footer" data-position="fixed" data-id="footer_main"> 
    <div data-role="navbar"> 
     <ul class="navbar"> 
      <li><a href="#home" data-icon="home" class="search">Home</a></li> 
      <li><a href="#bycity" data-icon="search" class="search2">City</a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer -->

이 문제는 거의 같은 방식으로 안드로이드와 아이폰에 일어날 것 (아이폰 어쩌면 더).

BTW - 나는 "jquery.mobile-1.0b2를"jQuery를 모바일을 사용하고 있는데 폰갭 1.0

출처

2011-08-20 Roman

그것은 JQuery와 모바일 문제입니다. 지금은 해결책이 없습니다. –

오 남자 ... 안돼요? – Roman

기다림 b3, ... 그리고 최종 버전 –

봅니다 바닥 글에 클래스를 추가 :

<div class=”footer” data-role="footer" .....>

그리고 당신의 클릭에 다음 함수를 추가 이벤트 :

$('.footer').trigger('create');

이 모양은 다음과 같습니다

$('.class').click(function() { 

    $('.footer').trigger('create'); 

});

출처

2011-10-11 02:48:47 LarsB

동일한 문제가 너무 있습니다. 내비게이션은 숨겨져 있으며 사용자가 show-navigation-button을 클릭하면 표시됩니다.

문제는 JQM이 바닥 글 위치에 대해 position : fixed를 사용하는 상위 속성 instad를 계산하고 움직입니다. 하단 : 0;

확실한 이유가 있습니다. 그러나 나는 그것이 무엇인지 모른다. 그리고 footer top-pos의 위치를 변경하는 기능이 없습니다. $('.footer').trigger('create'); .. 나를 위해 작동하지 않습니다.

출처

2012-02-23 16:40:16

CSS 속성을 추가하여 바닥 글을 고정 할 수 있습니다. 이 같은 바닥 글 DIV에 = "절대 위치"

bottom:0; 
position:absolute !important; 
top: auto !important; 
width:100%;

출처

2013-08-12 10:39:11

추가 스타일

<div data-role="footer" data-position="fixed" style="position: absolute">

출처

2014-03-11 11:38:33 batanasov

jQuery Mobile 및 고정 바닥 글

답변

관련 문제