实现方式：在标题和页脚区域加入 data-position="fixed"属性。
标题容器
标题容器是页面页眉区域的显示控件，主要用来显示标题和主要操作的区域。
结构代码：
复制代码<div data-role=”header”>
<h1>Page Title</h1>
</div>
为了方便页面的交互在页面切换后会在标题容器的左侧自动生成一个后退按钮，这样可以简化我们的开发复杂程度，但是有些时候我们会因为应用的需求而不需要这个后退按钮，可以在标题容器上添加 data-backbtn="false"属性用来阻止后退按钮的自动创建。
标题容器的左侧和右侧分别可以放置一个按钮，在阻止自动生成的后退按钮后，我们就可以在后退按钮的位置来自定义按钮了。
例如：
复制代码<div data-role=”header” data-position=”inline” data-backbtn=”false” >
<a href=”index.html” data-icon=”delete”>Cancel</a>
<h1>Edit Contact</h1>
<a href=”index.html” data-icon=”check”>Save</a>
</div>
如果需要自定义默认的后退按钮中的文本，可以用data-back-btn-text="previous"属性来实现，或者通过扩展的方式实现：
复制代码$.mobile.page.prototype.options.backBtnText = “previous”
如果你没有使用标准的结构来创建标题区域，那么框架将不会自动生成默认的按钮。
页脚容器
页脚容器的结构和标题容器的结构基本相同，只要把 data-role 属性的参数设置为”footer”。
例如：
复制代码<div data-role=”footer”>
<h4>Footer content</h4>
</div>
与标题容器相比页脚容器有更多的灵活度，它不会想标题容器一样只允许放置两个按钮，并且也不会默认的把按钮放置在左右的顶端，页脚的按钮默认是从左到右依次排列的，并且何以放置更多的按钮。
在页脚容器上只要添加一个 class="ui-bar"就可以将页脚变成一个工具条，你可以不用设置任何的布局样式就可以在其中添加整齐的按钮。
例如：
复制代码<div data-role=”footer” class=”ui-bar”>
<a href=”index.html” data-role=”button” data-icon=”delete”>Remove</a>
<a href=”index.html” data-role=”button” data-icon=”plus”>Add</a>
<a href=”index.html” data-role=”button” data-icon=”arrow-u”>Up</a>
<a href=”index.html” data-role=”button” data-icon=”arrow-d”>Down</a>
