jquery mobileのindex.htmlページで1つの外部htmlページを呼び出すときに、ヘッダーとフッターに問題があります。これが私がフォローしているサンプルコードです:
index.html
<section id="main" data-role="page">
<header data-role="header">
</header>
<div data-role="content" class="mainScreen">
<a href="#single" data-theme="e" data-role="button" >Single</a>
<a href="sample.html" data-theme="e" data-role="button">Sample</a>
<a href="#faq" data-transition="slide" data-theme="e"data-role="button">FAQ</a>
</div>
</section>
<section id="single" data-role="page">
<header data-role="header">
<div>..</div>
<footer data-role="footer">
</section>
<section id="faq" data-role="page">
<header data-role="header">
<div>..</div>
<footer data-role="footer">
</section>
main.js
$("header").attr("data-position","fixed").attr("data-tap-toggle","false");
$("footer").attr("data-position","fixed").attr("data-tap-toggle","false");
sample.html
<html>
<head>......</head>
<body>
<section id="sample" data-role="page">
<header data-role="header">
<div>..</div>
<footer data-role="footer">
</section>
</body>
</html>
上記のindex.htmlページで「#single」と「#faq」を呼び出すと、ヘッダーとフッターは固定された位置で正しく表示されますが、sample.html(外部HTMLページ)を呼び出すと、ヘッダーとフッターの位置が表示されません。固定位置。彼らは動いています。