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

长空一笑

浏览: 165913 次
性别:

最近访客更多访客>>

chenyanfei

gxpcw

sugou

a1111b2222

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery Mobile新手入门

在一个文件中创建多页面

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>

效果如图：