0

メインのhtml5ボディにヘッダーとフッターとリストビューがありますが、リストビューが大きい場合、ヘッダーを含むページ全体がスクロールするという問題があります。

私が達成しようとしているのは、リストビューをスクロール可能にするだけで、ヘッダーとフッターが常に表示されるようにすることです。

これはhtml5/jqueryで可能ですか?

編集：

これが私が試したことです。

<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
    <div data-role="page" id="page">
        <div data-role="header" data-position="fixed">
            <a href="" onclick="history.back(-1); return false;">Back</a>
            <h1>Claim Items</h1>
        </div>
        <div data-role="content">
            <h3 style="margin-left:1em">The Demo Title</h3>
            <ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
                <li><a href="#page2">1: demo</a></li>
                <li><a href="#page2">2: demo</a></li>
                <li><a href="#page2">3: demo</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-bar">
            <div data-role="navbar">
                <ul>
                    <li><a href="fdfd.html">Add an Item</a></li>
                    <li> <a href="">Remove an Item</a></li>
                    <li><a href="">Add comment</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
4

2 に答える 2

1 
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
    <h1>Header</h1>
</div>

私の経験では、ページのどこかをクリックしてもヘッダーが消えないようにするため、data-tap-toggle を false に設定する必要もあります。また、この data-id が必要です。複数のページがある場合、各ページのヘッダーに同じ data-id が必要であるため、jquery モバイルはアクティブなページの現在のヘッダーを置き換えません。

編集: 実際のデバイスでページ遷移中に点滅が発生する場合は、これをインデックス html にも追加する必要があります 

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-07-10T05:11:05.710 に答える