讨论如何固定jquery mobile的Header与Footer通过页切换中间的内容

Question

可以为header,footer设置属性data-position="fixed"，但是效果并不好。如果您的内容超过一屏的长度的时候，拉动页面的时候非常的丑陋。

Answer 1

我也在找这个方法，但好像不行。我现在是这样做的，header 和 footer 固定，然后content 是一个个的div，这些div 的display 属性控制当前要显示的页，但这样没有动画切换的效果，可能可以加，但我不会。另外这样做有个不好的地方，就是你不能去改变header 里面的title 和 按钮。因为jqm会自动生成很多代码，比如我的header:<div data-theme="b" data-role="header" data-position="fixed" data-tap-toggle="false">
                <h3><div id="home_page_caption">健康管家</div></h3>
                <a id='btn_left' data-role="button" href="#" onclick="navigator.app.exitApp()" data-icon="back" data-iconpos="left">注销</a>
                <a id='btn_right' data-role="button" href="#" data-icon="alert" data-iconpos="right">关于</a>
            </div>最后被生成：<div data-theme="b" data-role="header" data-position="fixed" data-tap-toggle="false" class="ui-header ui-bar-b ui-header-fixed slidedown" role="banner">
                <h3 class="ui-title" role="heading" aria-level="1"><div id="home_page_caption">健康管家</div></h3>
                <a id="btn_left" data-role="button" href="#" onclick="navigator.app.appExit()" data-icon="back" data-iconpos="left" class="ui-btn-left ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">注销</span><span class="ui-icon ui-icon-back ui-icon-shadow">&nbsp;</span></span></a>
                <a id="btn_right" data-role="button" href="#" data-icon="alert" data-iconpos="right" class="ui-btn-right ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-right" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">关于</span><span class="ui-icon ui-icon-alert ui-icon-shadow">&nbsp;</span></span></a>
            </div>一塌糊涂

Answer 2

我遇到的问题也很奇怪，data-role="page"里面：data-role="header"  data-position="fixed" 
data-role = "footer"  data-position="fixed"就是说页面头和尾都写了固定，正常情况下确实是固定的。比如：
但是如果点击屏幕中的任何一个图片或者内容区的空白地方，尾部或者头部就会消失：
有的时候头部消失，有的时候尾部消失。消失的时候再次点击图片或者空白区，又会出现。真不知道问题出在哪儿，谁知道呢？？

Answer 3

data-tap-toggle="false" 保持最前固定位置显示 问题应该能解决。

Answer 4

我也是遇到这样的问题，我用的dw6默认的库，我用最新的库此问题就自然解决了，比如现在我用的最新的是：
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

Answer 5

弱弱问下，既然要替换page的内容，讲header跟footer放在page的外面不可以么

Answer 6

无用 data-tap-toggle="false" 还是会把 footer撑到最下面去。