6

我使用 Phonegap 和 jQuery Mobile 设计了一个应用程序。固定页脚正常工作，直到我单击下拉列表或文本字段，这会导致页脚从视图中消失（Android 4.0）或移动到视图中间（Android 2.2 Galaxy Tab）。有什么建议么？

Phonegap 版本：Cordova 2.1.0
jQuery Mobile 版本：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>
4

6 回答 6

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

容差导致横向高度与纵向宽度的不精确计算，反之亦然。

于 2012-11-01T11:46:32.023 回答
3

当我们将焦点放在输入上时，键盘会打开，因此：

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

$("input").focus(function() {
    $("[data-role=footer]").hide();
});
于 2013-04-26T07:44:55.660 回答
3

好的，这个线程在这一点上与互联网一样古老，但上面的答案似乎并没有为我做这项工作。

我发现的最好方法是将方法绑定到 jquery .blur() 事件，然后以非常特定的顺序调用 fixedtoolbar() 方法，即

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

……

onFocusLoss : function() {
    try {
        $("[data-position='fixed']").fixedtoolbar();
        $("[data-position='fixed']").fixedtoolbar('destroy');
        $("[data-position='fixed']").fixedtoolbar();
        console.log('bam');
    } catch(e) {
        console.log(e);
    }
},
于 2013-01-25T15:37:15.260 回答
1

您还可以检测键盘何时显示以及何时隐藏并相应地显示或隐藏您的页脚：

document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false);
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);
于 2014-06-25T11:33:42.727 回答
0

Try data-hide-during-focus="" and set it to an empty string.

于 2014-03-19T14:15:01.097 回答
0

我的解决方案在 div 页脚上使用了另一个 JQUERY 属性。我只需要向该 div 添加 data-fullscreen="true" 即可。我知道这个修复可能直到最近才可用，但我使用的是 jqm 1.3.2 和 jq 1.9。我想我会发布这个解决方案，以防万一它对某人有帮助。祝你好运。:)

于 2015-10-01T17:31:32.543 回答