出现键盘的时候jQuery Mobile的固定页脚动 [英] jQuery Mobile fixed footer is moving when the keyboard appears

问题描述

我已经设计使用的PhoneGap和jQuery Mobile的一个应用程序。该固定页脚正常工作，直到我点击下拉或文本字段，这会导致页脚无论是从视野中消失（安卓4.0）或移动到视图（的Andr​​oid 2.2的Galaxy Tab）的中间。有什么建议？

PhoneGap的版本：科尔多瓦2.1.0
jQuery Mobile的版本：1.2.0

下面是我的code：

 ＆LT; D​​IV数据角色=页脚级=NAV-mobilyzer数据分接开关的切换=假数据位=固定＆GT;
  ＆LT; D​​IV数据角色=导航栏级=NAV-mobilyzer数据网格=D＆GT;
    ＆LT; H1＆GT;尾＆LT; / H1＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

我在某些设备页脚中显示的问题，而在其他没有。我发现这个工作对我来说：

  VAR initialScreenSize = window.innerHeight;
window.addEventListener（调整大小功能（）{
    如果（window.innerHeight＆LT; initialScreenSize）{
        $（[数据角色=躯]）隐藏（）。
    }
    其他{
        $（[数据角色=躯]）显示（）。
    }
}）;
 

编辑：

但怎么样的方向变化？

  VAR portraitScreenHeight;
VAR landscapeScreenHeight;

如果（window.orientation === 0 || window.orientation === 180）{
    portraitScreenHeight = $（窗口）.height（）;
    landscapeScreenHeight = $（窗口）.WIDTH（）;
}
其他{
    portraitScreenHeight = $（窗口）.WIDTH（）;
    landscapeScreenHeight = $（窗口）.height（）;
}

VAR容差= 25;
$（窗口）.bind（调整大小，函数（）{
    如果（（window.orientation === 0 || window.orientation === 180）及＆安培;
       （（window.innerHeight +容）＆LT; portraitScreenHeight））{
        //键盘的纵向可见
    }
    否则，如果（（window.innerHeight +容）＆LT; landscapeScreenHeight）{
        //键盘景观可见
    }
    其他{
        //键盘不可见
    }
}）;
 

公差占景观高度不精确计算与纵向宽度和VIS-反之亦然。

I have designed an app using Phonegap and jQuery Mobile. The fixed footer works properly until I click on a dropdown or text field, which causes the footer to either disappear from view (Android 4.0) or move to the middle of the view (Android 2.2 Galaxy Tab). Any suggestions?

Phonegap Version: Cordova 2.1.0
jQuery Mobile Version: 1.2.0

Here is my code:

<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>

解决方案

I had the problem in some devices the footer displayed and in others it didn't. I found this worked for me:

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

EDIT:

But what about orientation changes?

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
    }
});

The tolerance accounts for the inexact calculation of landscape height with portrait width and vis-versa.

这篇关于出现键盘的时候jQuery Mobile的固定页脚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！