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

data-hide-during-focus="" を試して、空の文字列に設定してください。

于 2014-03-19T14:15:01.097 に答える