2012-10-27 4 views
7

Phonegap 및 jQuery Mobile을 사용하여 앱을 설계했습니다. 드롭 다운이나 텍스트 필드를 클릭 할 때까지 고정 바닥 글이 제대로 작동하므로 바닥 글이보기 (Android 4.0)에서 사라지거나보기의 중간 (Android 2.2 Galaxy Tab)으로 이동합니다. 어떤 제안?jQuery 키보드가 나타나면 모바일 고정 바닥 글이 움직입니다.

폰갭 버전 : 코르도바 2.1.0
jQuery를 모바일 버전 : 1.2.0 여기

내 코드입니다 :

<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed"> 
    <div data-role="navbar" class="nav-mobilyzer" data-grid="d"> 
    <h1>footer</h1>   
    </div> 
</div> 
+0

여기에 비슷한 질문에 대한 답변을 보았습니까? http://stackoverflow.com/questions/6861764/jquery-mobile-stick-footer-to-bottom-of-page – Taifun

+0

여기 내 솔루션입니다. IOS에 대한 문제 http://stackoverflow.com/questions/13097663/jquery-mobile-fixed-footer-is-moving-when-the-keyboard-appears/29415239#29415239 – eliprodigy

답변

14

나는 바닥 글이 표시 일부 장치에 문제가 있었다 다른 사람에 하지 않았다.

var initialScreenSize = window.innerHeight; 
window.addEventListener("resize", function() { 
    if(window.innerHeight < initialScreenSize){ 
     $("[data-role=footer]").hide(); 
    } 
    else{ 
     $("[data-role=footer]").show(); 
    } 
}); 

편집 :

그러나 대한 방향 변경을 나는 이것이 나를 위해 일한 발견?

var portraitScreenHeight; 
var landscapeScreenHeight; 

if(window.orientation === 0 || window.orientation === 180){ 
    portraitScreenHeight = $(window).height(); 
    landscapeScreenHeight = $(window).width(); 
} 
else{ 
    portraitScreenHeight = $(window).width(); 
    landscapeScreenHeight = $(window).height(); 
} 

var tolerance = 25; 
$(window).bind('resize', function(){ 
    if((window.orientation === 0 || window.orientation === 180) && 
     ((window.innerHeight + tolerance) < portraitScreenHeight)){ 
     // keyboard visible in portrait 
    } 
    else if((window.innerHeight + tolerance) < landscapeScreenHeight){ 
     // keyboard visible in landscape 
    } 
    else{ 
     // keyboard NOT visible 
    } 
}); 

허용 오차는 세로 폭과 마주 반대 가로 높이의 부정확 한 계산을 차지한다.

+0

는 HTTP 참조 : // 유래. com/questions/11600040/jquery-js-html5-change-page-content-keyboard-when-visible-on-mobile-devices – gmh04

+0

이것은 나를 위해 일했습니다 ... 감사합니다! –

+0

이 코드를 어떻게 사용합니까? 내가 똑같은 문제 @ gmh04에 직면 난 – Erum

4

그래,이 스레드는 인터넷만큼이나 오래되었지만 위의 대답은 나를 위해 일하지 않는 것 같습니다.

내가 찾은 가장 좋은 방법은 즉

var that = this; 
    $(':input').blur(function(){ 
     that.onFocusLoss(); 
    }); 

, 매우 특정 순서로 fixedtoolbar() 메소드를 호출 한 후 JQuery와 .blur() 이벤트에 대한 방법을 결합하고,하는 것이 었습니다 ......

onFocusLoss : function() { 
    try { 
     $("[data-position='fixed']").fixedtoolbar(); 
     $("[data-position='fixed']").fixedtoolbar('destroy'); 
     $("[data-position='fixed']").fixedtoolbar(); 
     console.log('bam'); 
    } catch(e) { 
     console.log(e); 
    } 
}, 
3

키보드는 우리가 입력에 초점이있을 때 열 :

// hide the footer when input is active 
$("input").blur(function() { 
    $("[data-role=footer]").show(); 
}); 

$("input").focus(function() { 
    $("[data-role=footer]").hide(); 
}); 
0

시도 데이터 숨기기-동안 초점을 "="와로 설정 빈 문자열.

+0

안녕 Mohan, 당신의 대답은 Stackoverflow 표준과 일치 하기엔 너무 작을 것 같습니다, 당신의 답변이 항상 도움이 될 것으로 기대되는 코드로 자세히 (그러나 요점까지) 있다면 좋을 것입니다. – Vasim

1

당신은 때 키보드 쇼와 때 숨기고 쇼도 감지하거나 그에 따라 바닥 글을 숨길 수 :

document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false); 
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false); 
0

내 솔루션 사업부의 바닥 글에 다른 JQuery와 속성을 사용합니다. data-fullscreen = "true"를 해당 div에 추가하면 모두 필요했습니다. 나는이 수정이 최근까지는 가능하지 않았을 수도 있지만, 나는 jqm 1.3.2와 jq 1.9를 사용하고 있음을 안다. 누군가를 돕기 위해이 솔루션을 게시 할 것이라고 생각했습니다. 행운을 빕니다. :)

관련 문제