<div data-role="header" data-theme="c" data-position="fixed"> <h1>Page Header</h1> <!-- <a href="../index.htm" data-icon="back">back</a>--> <a href="../index.htm" data-icon="check">Save</a> <!-- <a href="../index.htm" data-icon="back">back1</a> <a href="../index.htm" data-icon="check">Save1</a>--> </div><!-- /header -->

添加两个按钮时：

<div data-role="header" data-theme="c" data-position="fixed"> <h1>Page Header</h1> <a href="../index.htm" data-icon="back">back</a> <a href="../index.htm" data-icon="check">Save</a> <!-- <a href="../index.htm" data-icon="back">back1</a> <a href="../index.htm" data-icon="check">Save1</a>--> </div><!-- /header -->

更多按钮时：

<div data-role="header" data-theme="c" data-position="fixed"> <h1>Page Header</h1> <a href="../index.htm" data-icon="back">back</a> <a href="../index.htm" data-icon="check">Save</a> <a href="../index.htm" data-icon="back">back1</a> <a href="../index.htm" data-icon="check">Save1</a> </div><!-- /header -->

自动定位功能实际是当header内容之有一个按钮时，会自动给这个按钮添加ui-btn-left样式，当有两个时会给前面一个添加ui-btn-left样式，给第二个自动添加ui-btn-right样式；更多时，第三个到第n个应用ui-btn样式；

当然我们可以自己设置按钮的位置：

<div data-role="header" data-theme="c" data-position="fixed"> <h1>Page Header</h1> <!-- <a href="../index.htm" data-icon="back">back</a>--> <a href="../index.htm" data-icon="check">Save</a> <!-- <a href="../index.htm" data-icon="back">back1</a> <a href="../index.htm" data-icon="check">Save1</a>--> </div><!-- /header -->

View Code

<div data-role="page" data-add-back-btn="true"> <div data-role="header" data-theme="c" data-position="fixed"> <h1>Page Header</h1> <a href="../index.htm" data-icon="back">back</a> <a href="../index.htm" data-icon="check">Save</a> <!-- <a href="../index.htm" data-icon="back">back1</a> <a href="../index.htm" data-icon="check">Save1</a>--> </div><!-- /header --> <div data-role="content"> <h3>About us</h3> In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page. To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element. Fullscreen fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions. To enable this option on a fixed header or footer, add the data-fullscreen attribute to the element. </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Page Fotter</h4> </div><!-- /footer --> </div><!-- /page -->

Footer

1.footer和header一样，也是一个带有data-role=footer的div容器；拥有和header一样的data-position属性；这里就不在多讲了；

2.区别的是，footer不会有header那样的里面的按钮会有自动定位功能；footer里的内容会按照具体的css样式来显示内容；

3.当然我们可以再footer里添加各种自定义的功能(因为它只是一个div么 :) )；