zoukankan      html  css  js  c++  java
  • 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>
    ------------------------------------------------

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

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

     

      

  • 相关阅读:
    这两年
    Ubuntu 14.04 更新 setuptools 至 19.2 版本
    leetcode 编译问题:Line x: member access within null pointer of type 'struct TreeNode'
    C++ 将 std::string 转换为 char*
    LeetCode in action
    Ubuntu下 fatal error: Python.h: No such file or directory 解决方法
    Mac OS X 清除DNS缓存
    Mac OS X 避免产生临时文件 .DS_Store
    Mac OS X 显示和隐藏文件
    解决 ln -s 软链接产生的Too many levels of symbolic links错误
  • 原文地址:https://www.cnblogs.com/qiongmiaoer/p/2991663.html
Copyright © 2011-2022 走看看