web-dev-qa-db-ja.com

jQuery Mobileの固定フッターを修正する方法は？

JQueryMobileを使用して、マークアップにdata-role="footer" data-position="fixed"を含めましたが、次の2つのバグが残っています。

  • フッターはnullクリックイベントでトグルします。
  • フッターは固定されておらず、ページコンテンツの一部が非表示になっています。

IPhone 3gでテストしています。何か案は？

前もって感謝します。

[〜＃〜] update [〜＃〜]：クリックイベントが現在のページのフッターを変更し、ui-fixed-overlayをui-fixed-inlineに変更するようです。 display:none他のページのフッターが表示されないようにします。

この変更を防ぐにはどうすればよいですか？

javascriptiphonejquerymobilefooter
18
Tomer Lichtash

1.1以降を使用する場合は、ヘッダーとフッターに ここに記載 のようにdata-tap-toggle="false"を追加します。

JQuery Mobileのバージョンを使用している場合1.1より前の場合、jQuery Mobileをロードする前に以下を配置します。

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove
25
Roi

これはjQueryMobile 1.1 rc1で修正されています。 こちら を参照してください。

フッターでdata-tap-toggle = "false"を使用します。

14
Simon Vane

Jquery.mobile-1.0a4でフッターセクションにdata-position = "fixed"を追加すると、iPhone Android and Chrome

2
neavilag

現在の「答え」は少し見当違いかもしれません。 touchOverflowを使用すると短期的には役立つかもしれませんが、すぐになくなるでしょう。誰かがjQuery mobile blog を読んだとすると、1月10日に投稿されたこの宣伝文に気づくでしょう。

注目：touchOverflowは1.1で廃止予定– touchOverflow機能を初めて導入したとき、それはiOSのネイティブオーバーフローサポートを活用して、かなり狭い場合でも真の固定ツールバーとスムーズな移行を実現する良い方法だと考えました当時のデバイスのセット。 1.1で計画されている固定ヘッダーと移行の大幅な変更により、これらはtouchOverflowとほとんど同じ方法でエクスペリエンスを向上させますが、より多くのプラットフォームで動作し、複雑さが軽減されるため、この機能を廃止することにしました。 1.1で非推奨になり、1.2で削除されます。内部スクロールでオーバーフロー領域に対処するための将来の計画があるので、touchOverflowで行った作業の多くは再利用されます。

これを回答として投稿したことをお詫びしますが、現時点ではコメントできません。

2
MGG

私たちはこの問題を抱えており、iScroll（v3）とiScrollのNice jqueryモバイルラッパーの組み合わせを使用していました。それは完全に動作します。詳細はこちらをご覧ください：

http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

1
greencustard

私は非常に単純なことを行いました。CSSで見つかったソリューションは、コンテンツに適切な「min-height」を設定するだけです。これにより、ページのコンテンツでフッターがジャンプすることがなくなります。

1
Nikhil Patil

Re：フッターは修正されておらず、ページコンテンツの一部が非表示になっています。

私もこの問題に苦労しました。終了コンテンツのdivタグをフッターの開始前に移動する必要があることがわかりました。フッターがコンテンツのdivタグ内にあり、>>> data-position = "fixed" <<<をオンにすると、フッターは固定されません。

私のアプリでそれを再作成する方法がわからないので、「フッターがnullクリックイベントでトグルする」という他の問題については知りません。

使用中...

  • JQuery Mobile 1.3.2
  • コルドバ
  • フッターには、ナビゲーションバーと広告バナーがあります。
0
Sandi Laufenberg-Deku

私はjquery mobile 1.3.1を使用していますが、あなたが以前言ったすべてが私のアプリでは機能しません。しかし、私はこのバグの解決策を持っています。私の他の投稿をチェックしてください JQueryMobile-入力フォーカス後に固定フッターが固定されていません

$('div:jqmData(role="page")').on('pageinit',function(){
    $(document)
        .on('focus','input, select, textarea', function(){
            $('[data-role="footer"][data-position="fixed"]').hide();
        })
        .on('blur','input, select, textarea',function(){
            $('[data-role="footer"][data-position="fixed"]').show();
        });
});
0
Ary Wibowo

スクロール時にフッターも修正されないという同様の問題がありました。私のおすすめ？ Senchaであり、jQueryMobileではありません。バグが多く含まれており、本番環境では使用できません。

フッターは、URLから選択したページを強調表示します。私の場合、フッターメニューに影響を与えるのは/ urlです。

0
Alon Carmel