创建位置固定的header和footer

工具条固定在屏幕上方或者下方是一个很常见的界面设计，你可以为footer或者header添加 data-position="fixed"来实现这一点。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>跨平台移动应用</title> 
    <link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 
<body>
    <section id="page1" data-role="page" data-title="第一个页面">
        <header data-role="header" data-position="fixed">
            <h1>跨平台移动应用</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="#page2">第二个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第一个页面底部</h1>
        </footer>
    </section>
    <section id="page2" data-role="dialog" data-title="第二个页面">
        <header data-role="header" data-position="fixed">
            <h1>第二个页面</h1>
        </header>
        <div data-role="content"> 
            <p>Hello world</p> 
            <a href="http://www.baidu.com/">第一个页面</a>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h1>第二个页面底部</h1>
        </footer>
    </section>
</body>
</html>

Demo下载

 

posted @ 2014-06-27 00:31  linyongqin  阅读(671)  评论(0)    收藏  举报