频道栏目
读书频道 > 移动开发 > 其他综合 > jQuery Mobile权威指南
2.1.2 多容器页面结构
2012-10-12 16:01:27     我来说两句
收藏   我要投稿

本文所属图书 > jQuery Mobile权威指南

本书由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的权威参考书。在...  立即去当当网订购

在一个供jQuery Mobile使用的HTML页面中,可以包含一个元素属性“data-role”值为“page”的容器,也允许包含多个,从而形成多容器页面结构。容器之间各自独立,拥有唯一的Id号属性。页面加载时,以堆栈的方式同时加载;容器访问时,以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时,jQuery Mobile 将在页面文档寻找对应Id号的容器,以动画效果切换至该容器中,实现容器间内容的访问。

实例2-2 jQuery Mobile多容器间的切换

1. 功能说明

新建一个HTML 页面,并在页面中添加2个“data-role”属性为“page”的<div>元素,作为2个页面容器。用户在第一个容器中选择需要查看天气预报的日期,单击某天后,切换至第二个容器,显示所选日期的详细天气情况。

2. 实现代码

新建一个HTML页面2-2.htm,加入代码如代码清单2-2所示。

代码清单 2-2 jQuery Mobile 多容器间的切换

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 多容器页面结构</title>
    <meta name="viewport" content="width=device-width,
          initial-scale=1" /> 
    <link  href="Css/jquery.mobile-1.0.1.min.css"
          rel="Stylesheet" type="text/css" />
    <script src="Js/jquery-1.6.4.js"
          type="text/javascript"></script>
    <script src="Js/jquery.mobile-1.0.1.js"
          type="text/javascript"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>天气预报</h1></div>
    <div data-role="content">
         <p><a href="#w1">今天</a> | <a href="#">明天</a></p>
    </div>
    <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
  </div>
 
  <div data-role="page" id="w1" data-add-back-btn="true">
    <div data-role="header"><h1>今天天气</h1></div>
    <div data-role="content">
         <p>4~-7℃<br />晴转多云<br />微风</p>
    </div>
    <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3. 页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图2-2所示。


 

4. 源码分析

在本实例页面中,从第一个容器切换至第二个容器时,采用的是“#”加对应“Id”的内部链接方式。因此,在一个页面中,不论相同框架的“page”容器有多少,只要对应的Id号唯一,就可以通过内部链接的方式进行容器间的切换。在切换时,jQuery Mobile会在文档中寻找对应“Id”的容器,然后通过动画的效果切换到该页面中。

从第一个容器切换至第二个容器后,如果想要从第二个容器返回第一个容器,有下列两种方法:

 ·在第二个容器中,增加一个<a>元素,通过内部链接“#”加对应“Id”的方式返回第一个容器。

 ·在第二个容器的最外层框架<div>元素中,添加一个“data-add-back-btn”属性。该属性表示是否在容器的左上角增加一个“回退”按钮,默认值为“false”;如果设置为“true”,将出现一个“back”按钮,单击该按钮,回退上一级的页面显示。

说明 如果是在一个页面中,通过“#”加对应“Id”的内部链接方式,可以实现多容器间的切换;但如果不是在一个页面,此方法将失去作用。因为在切换过程中,先需要找到页面,再去锁定对应“Id”容器的内容,而并非直接根据“Id”切换至容器中。

您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.1.1 基本框架
下一篇:2.1.3 外部页面链接
相关文章
图文推荐
排行
热门
最新书评
文章
下载
读书
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站