标头&在index.html页面中调用外部HTML页面时，页脚位置不固定? [英] header & footer positions not fixed when calling external HTML page in index.html page?
问题描述
我对标题&在jquery mobile的index.html页面中调用一个外部html页面时，页脚.这是我要遵循的示例代码:
I have a problem with header & footer while calling one external html page in my index.html page in jquery mobile. Here is the sample code which I am following:
index.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
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页面)时，页眉和页脚的位置未固定显示.他们在移动.
In the above index.html page when calling "#single" & "#faq", the header and footer are displaying correctly by their positions fixed but when sample.html (external HTML page) was called header and footer position are not displaying in fixed positions. they are moving.
推荐答案
问题出在调用attr()方法的时间上.您需要绑定到pagebeforecreate.这样，您可以在JQM增强标记之前设置页眉和页脚属性.即
The issue lies in the timing that you are calling your attr() method. You need to bind to pagebeforecreate. This way your header and footer attributes are set before JQM enhances your markup. i.e.
$(document).on('pagebeforecreate', function(){
$("header").attr("data-position","fixed").attr("data-tap-toggle","false");
$("footer").attr("data-position","fixed").attr("data-tap-toggle","false");
});
注意:如果您的jQuery版本低于1.7，请使用bind或委托代替on()
Note: If your jQuery version is pre 1.7 use bind or delegate instead of on()
这篇关于标头&在index.html页面中调用外部HTML页面时，页脚位置不固定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
