我正试图在Phonegap项目中使用JQM在iOS应用程序中创建固定的页眉和页脚。我有一个使用可折叠DIV的页面,它在DIV中有一个文本输入。在我展开DIV并在文本字段中输入内容之前,页眉和页脚都很好。一旦我关闭iOS键盘,页眉就会向上移动,并被iPhone的"信息"栏覆盖,页脚也会在页面上向上滑动,不再固定在底部。如果我在此之后展开另一个可折叠的DIV,页脚会移回正确的位置,但页眉会覆盖在屏幕顶部。有什么想法吗?
JQM页面代码:
<div data-role="page" id="wizard_3">
<div data-role="header" class="header" data-id="cls_header">
<h1>
<label>Testing®</label>
testProgram®</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" id="ability_set">
<div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion">
<h3 id="abilQuestion1Header">XXXXXXX </h3>
<p id="abilQuestion1Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability1" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion">
<h3 id="abilQuestion2Header">XXXXXXX</h3>
<p id="abilQuestion2Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability2" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion">
<h3 id="abilQuestion3Header">XXXXXXX</h3>
<p id="abilQuestion3Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability3" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion">
<h3 id="abilQuestion4Header">XXXXXXX</h3>
<p id="abilQuestion4Textr">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability4" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion">
<h3 id="abilQuestion5Header">XXXXXXX</h3>
<p id="abilQuestion5Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability5" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion">
<h3 id="abilQuestion6Header">XXXXXXXX</h3>
<p id="abilQuestion6Text">XXXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability6" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer" data-theme="b"> <span class="leftButton">
<input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/>
</span> <span class="rightButton">
<input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/>
</span> </div>
</div>
我解决了一个类似的问题:
/* iOS keyboard popup somehow leaves page scrolled, unscroll it */
$.mobile.silentScroll(0);
我在中找到了解决方案http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard
看看这个解决方案。
这被报告为jQM错误,但它仍然存在于jQM 1.3.2中。
试试这个对我有效的解决方案,取自下面的线程。
// Workaround for buggy header/footer fixed position when virtual keyboard is on/off
$('input, textarea')
.on('focus', function (e) {
$('header, footer').css('position', 'absolute');
})
.on('blur', function (e) {
$('header, footer').css('position', 'fixed');
//force page redraw to fix incorrectly positioned fixed elements
setTimeout( function() {
window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
}, 20 );
});
其他解决方案发布在此处。这是一条值得关注的线索:https://github.com/jquery/jquery-mobile/issues/5532
这是一个很难解决的问题。你可以尝试在输入元素焦点处隐藏页脚,并在模糊处显示,但这在iOS上并不总是可靠的。每隔一段时间(比如说,在我的iPhone 4S上,每十次就有一次),焦点事件似乎无法启动(或者可能存在比赛情况),并且页脚也不会被隐藏。
经过多次尝试和错误,我想出了一个有趣的解决方案:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
本质上:使用JavaScript来确定设备的窗口高度,然后动态创建一个CSS媒体查询,以在窗口高度缩小10像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小,所以这在iOS上永远不会失败。因为它使用的是CSS引擎而不是JavaScript,所以它也更快、更流畅!
注意:我发现使用"可见性:隐藏"比"显示:无"或"位置:静态"问题少,但您的里程数可能会有所不同。
我发现这个问题的最佳解决方案是使用这个插件:(输入模糊效果不佳)
离子插件键盘
bindViewEvents: function () {
var context = this;
window.addEventListener('native.showkeyboard', context.keyboardShowHandler);
window.addEventListener('native.hidekeyboard', context.keyboardHideHandler);
},
keyboardHideHandler: function (e) {
var context = this;
$(".ui-footer[data-role='footer']").show();
},
keyboardShowHandler: function (e) {
var context = this;
$(".ui-footer[data-role='footer']").hide();
}
我只是测试它,它能工作。
$(document).on('focus','input', function() {
setTimeout(function() {
$('#footer1').css('position', 'absolute');
$('#header1').css('position', 'absolute');
}, 0);
});
$(document).on('blur','input', function() {
setTimeout(function() {
$('#footer1').css('position', 'fixed');
$('#header1').css('position', 'fixed');
}, 800);
});