3:在一个文件中创建多页面

    jQuery Mobile允许在一个文件中创建多个页面,不同的页面由id唯一标识。

如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title></title>
    <link href="../src/jquery.mobile-1.4.3.min.css" rel="stylesheet"/>
    <script src="../src/jquery.min.js"></script>
    <script src="../src/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<!--
在jQuery Mobile中,如果将div容器的data-role属性值设置为“page”,则该容器为一个页面。
在一个文件中,可以设置多个div容器为页面,即多个页面在同一个文件中,不同的页面由id唯一
标识。在同一文件中的多个页面间进行的切换,称为内连接。方式为:添加一个a元素,并将href属性
值设置为“#”加对应页面的id值的形式。如下所示:
-->
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>首页</h1>
    </div>
    <div data-role="content">
        <!--
        在同一文件中的页面之间进行切换,由a元素的href属性值为“#”加对应要切换的页面的id值完成。
        -->
        <p><a href="#page2">详细页</a></p>
    </div>
    <div data-role="footer">
        <h1>页脚</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <a href="#page1">返回</a>
        <h1>这是详细页</h1>
    </div>
    <div data-role="content">
        <p>好吧,我确实不知道该说些什么</p>
    </div>
    <div data-role="footer">
        <h1>我真不知道能说些什么</h1>
    </div>
</div>
<!--除内连接外,还有一个外连接。外连接指的是通过单击页面中的某个链接,跳转到另外一个文件页面。
实现方式和我们普通的web页面跳转类似。-->
</body>
</html>

 

 效果如图:


3:在一个文件中创建多页面
 
3:在一个文件中创建多页面
 

你可能感兴趣的:(在一个文件中创建多页面)