0

注: これは、Firefox、Chrome で問題なく動作します。唯一の問題は、モバイル ブラウザー (iphone/android) を使用することです。

jQuery/jQuery モバイルを使用してアドレス帳 (電話帳) を模倣する Web ページを作成しました。リストにはすべての連絡先があり、連絡先を検索するための検索フィルター バーがあります。

<ul id="Addressbook" data-role="listview" data-filter="true" data-filter-placeholder="Type name here for filter search" data-filter-theme="f" data-inset="true">

さらに、すでに宣言したページのロード時に

$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
$("[data-role=header]").fixedtoolbar({ tapToggle: false });

ただし、検索フィルター バーをクリックすると、CSS がめちゃくちゃになります (検索フィルター バーが画面の高さの約 70% に移動し、配置 (z-index) にリンクされている他のすべての css が表示されます)。歪んだ（絶対/固定配置も機能しません）しかし、電話でフィルターを完全に入力して「完了」を押した後、CSSは元の状態に更新され、デフォルトの動作を防ぐことができるかどうか疑問に思っていました。デフォルトを防止しますが、役に立ちませんでした。

任意の助けをいただければ幸いです。

4

1 に答える 1

0

具体的には、jquery モバイル ソース コードの 10116 行目 (縮小されたものではない) について、固定ヘッダーの jquery ソース コードで何が起こっているかを正確に調査できます。最初にそのリストビューには入力要素があり、それをクリックしたときにその問題が発生した場合は、固定ヘッダーと focusin イベントに何か問題があることを意味するので、固定ヘッダーが定義されている場所を見つけて、到達するまで下ります私たちの必要なもの。

画面が特定のサイズよりも小さい場合、固定ヘッダーは引き続き非表示になります。たとえば、この行

.bind( "focusin focusout", function( e ) {
      if ( screen.width < 1025 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ) {}

固定ヘッダーでその非表示をトリガーするため、この行に移動し、その前の括弧の直後に if ステートメントを追加して無効にすることができます

.bind( "focusin focusout", function( e ) {
    return false;
    //you can keep rest of the code

これにより、ヘッダーがオンのままになり、問題が解決することが期待されます。

于 2013-07-16T04:23:52.030 に答える