easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

 <div id="mainPage"  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" class="ui-btn-right" data-icon="check">Save</a>          <!-- <a href="../index.htm" class="ui-btn-left" 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 -->