0

ここに画像の説明を入力したがって、Jquery Mobile の開発に関してはまったくの初心者であり、JQM ライブラリーの小さな側面を理解するのに誰か助けてくれるかどうか疑問に思っていました。

私の問題は、特にページ コンテンツと iOS キーパッドに関連しています。サイズが異なるコンテンツを含むページがいくつかあります。たとえば、あるページには 5 つの入力フィールドがあり、次のページには 4 つしかありません。iOS の「次へ」ボタンを使用してさまざまなフィールド間を移動し、最後のフィールドにたどり着くと、キーパッドの上にフッターが自動的に表示されます。これは理想的には必要なものです。

ただし、入力フィールドが 4 つしかない次のページで、「次へ」ボタンを使用してフィールド間を移動し、最後のフィールドに到達すると、フッターがキーパッドの真上に表示されず、その上に表示されません。キーパッドが消えると、最後の入力フィールドとフッターの間に空白が生成されます。

なぜこれが起こるのですか？ページのコンテンツと関係があると思いますが、よくわかりません。キーパッドが非アクティブになったときに何が起こるかを示す画像を添付しました。

<div data-role="page" data-theme="f" id="some id">
        <div data-role="header">
            <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>Text</h1>
            <a href="#some href" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
<div data-role="content">
        <label for="some label">Text</label>
        <select name="some name" id="some id">
            <option value="Default">Select </option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        <label for="some label">Text:</label>
        <select name="some name" id="some id">
            <option value="Default">Select  Status</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
        </select>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id" value="" class="required"/>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id value="" class="required"/>

    </div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height: 42px;">
        <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>
4

1 に答える 1

0

これは、 iOS6、UIWebView、および position:fixed に密接に関連しているように見えます。実際にフッターを動かしたいのとまったく同じではありませんが、高さの更新のタイミングに関連している可能性があります。

おそらく、jquery mobile が javascript から行う位置の変更をオーバーライドすることで、問題を解決できます。jquery mobile は固定位置をネイティブに処理しない古いブラウザーもサポートしているため、このスクリプトが存在します。最新バージョンの iOS のみをサポートする必要がある場合は、純粋な CSS を使用してより良い結果を得ることができます。

于 2012-11-16T05:33:47.133 に答える