1

固定ヘッダーがページの上部に留まりません。これは、javascript を介して追加されたいくつかの数値入力を含むページの上にあります。ユーザーがこれらの入力を入力すると、期待どおりにヘッダーが消えます。ただし、ユーザーがテキスト ボックスをタップすると、ヘッダーはページの中央に再び表示されます。ページの上部に戻るには、ユーザーは 2 回タップする必要があります。

/編集 ここにもう 1 つの重要な情報があります。これは、次のボタンを使用して次のテキスト ボックスに移動し、情報を入力したときに発生します。

http://jsfiddle.net/7PZPy/1/で自分のページの jsfiddle の例を作成しました。バグが表示されるわけではありませんが、ページの内容がよくわかるはずです。*/

これは、iPhone および iPad で実行される phonegap アプリケーションです。JQM 1.3.1 を使用しています。

私の調査により、jquery フルページ モードと CSS による固定位置を使用してみました。また、h1 タグ内にないものをすべて削除しようとしました。残念ながら、データ位置が固定に設定されている限り、ヘッダーはページを上下に移動します。私のhtmlは以下です。助けてください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/jquery.css" />
        <link rel="stylesheet" type="text/css" href="css/ims-theme.css" />


        <script type="text/javascript"  src="js/jquery.js"></script>
        <script type="text/javascript"  src="js/jquery-migrate.js"></script>
        <script type="text/javascript"  src="js/jquerymobile.js"></script>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript" src="js/WaitingDialog.js"></script>
        <script type="text/javascript" src="js/UniqueIdentifier.js"></script>
        <script type="text/javascript" src="js/iti.js"></script>
        <title>IMS Field Support</title>
    </head>
    <body>
        <div data-role="page" id="invPage">
            <script type="text/javascript" src="js/inventory.js"></script>
            <div data-role="header" data-position="fixed">
                <h1>Inventory</h1>
                <div id="divAlert" style="display:none">
                    <a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
                </div>
            </div>
            <div id="inventoryContent" data-role="content">
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="inventory.html" data-icon="grid" class="ui-btn-active ui-state-persist"> Inventory</a></li>
                        <li><a href="technician.html"  data-icon="edit" onclick="cacheInventoryPage();">Technician</a></li>
                        <li><a href="logout.html"  data-icon="delete" onclick="cacheInventoryPage();">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
4

3 に答える 3

0

はdata-position="fixed"、本文のクリックやその他のイベントで消えるスマートフォンのようなヘッダーを作成するために使用されます。

css必要に応じて、次のような方法でヘッダーのスタイルを設定できます。

#myheader{
 position: fixed !important;
 width:100%;
 top: 0px;
}

魔法のように機能します

PS: !importantjquerymobile が position 属性を変更しようとする試みを上書きします。必要ない場合があります。

于 2013-06-17T15:32:48.920 に答える