jqueryMobile框架页面与页面切换

最新推荐文章于 2024-03-17 00:09:41 发布

遗失的小许

最新推荐文章于 2024-03-17 00:09:41 发布

阅读量358

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jqueryMobile框架页面与页面切换

jqueryMobile页面基本框架：header、content、footer

<!DOCTYPE html>
<html>
<head>
    <title>jQueryMobile框架页面</title>
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>
    <div data-role="page">
        <!-- /header -->
        <div data-role="header">
            <h1>Title</h1>
        </div>
        <!-- /content -->
        <div data-role="content">
            <p>Content</p>
        </div>    
         <!-- /footer -->    
        <div data-role="footer">
            <h4>Footer</h4>
        </div>       
    </div>
</body>
</html>

------------------------------------------------

　　博主经营一家发饰淘宝店，都是纯手工制作哦，开业冲钻，只为信誉！需要的亲们可以光顾一下！谢谢大家的支持！
店名：
　　小鱼尼莫手工饰品店
经营:
　　发饰、头花、发夹、耳环等（手工制作）
网店：
　　http://shop117066935.taobao.com/

---------------------------------------------------------------------

继续正题...

页面切换通过page的id来实现，具体参考文章：

http://www.cnblogs.com/caishuhua226/archive/2012/04/25/2469954.html

<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Title</h1>
        </div>
        <div data-role="content">
            <p>HomeContent</p>
            <p><a href="#about">GoTo about page</a></p>
        </div>    
        <div data-role="footer">
            <h4>Footer</h4>
        </div>       
    </div>
    <div data-role="page" id="about">
        <div data-role="header">
            <h1>Title</h1>
        </div>
        <div data-role="content">
            <p>AboutContent</p>
            <p><a href="#about">BackTo home page</a></p>
        </div>    
        <div data-role="footer">
            <h4>Footer</h4>
        </div>       
    </div>
</body>