• 源码分析
•在页面代码的<head>头部元素中，先通<meta>标记的“content”属性设置页面的宽度与模拟器的宽度相一致，以保证页面可以在浏览器中完全填充，接下来，导入了三个框架性文件，需要注意它们导入时的顺序。
•在代码的<body>主体元素中，通过多个<div>元素进行层次的划分，因为在jQuery Mobile中，每个<div>元素都是一个容器，根据指定的“data-role”属性值，确定容器对应的身份，如属性“data-role”的值为“header”，则该<div>元素的为头部区域。
•“data-role”属性是HTML 5的一个新特征，通过设置该属性，jQuery Mobile就可以很快地定位到指定的元素，并对内容进行相应的处理。
12.2：多页面的切换
• 简介
•通过实例1可以知道，在jQuery Mobile中，如果将页面元素的“data-role”属性值设置为“page”，则该元素成为一个容器，即页面的某块区域。在一个页面中，可以设置多个元素成为容器，虽然元素的“data-role”属性值都为“page”，但它们对应的“Id”号则不允许相同。
•在jQuery Mobile 中，将一个页面中的多个容器当作是多个不同的页面，它们之间的界面切换是通过增加一个<a>元素，并将该元素的“href”属性值设为“#”加对应“Id”号的方式来进行。
• 示例
•功能描述
•使用HTML 5结构编写一个jQuery Mobile 页面，在页面中设置两个“page”区域，当单击第一个区域中的“详细页”链接时，进入第二个区域；在第二个区域中，单击“返回首页”链接时，则又切换至第一个区域。
•
•代码编写与效果演示à
• 源码分析
•在jQuery Mobile中，针对一个页面中多个“page”区域间的切换称为内链接，其方式为添加一个<a>元素，并将该元素的“href”属性值设置为“#”加对应“Id”形式，如下所示：
•<a href="#page2">详细页</a>
•上述代码表示，单击“详细页”链接字样时，将切换到“Id”号为“page2”的区域中。除内链接外，还有一个外链接，所谓的外链接指定是通过单击页面中的某个链接字符，跳转到另外一个页面中，而不是在同一个页面间的切换，其实现的方式与内链接相同，只是在<a>元素中，增加了另外一个“rel”属性，并将该属性值设置为“external”，表示外链接，如下所示：
• 源码分析（续）
•<a href="a1.htm" rel="external">详细页</a>
•上述代码表示，单击“详细页”链接字样时，将跳转至文件名“a1”的HTML页面中。在页面切换过程中，无论是内链接还是外链接，jQuery Mobile都支持以动画的效果来进行，只需要在切换的<a>元素中，再添加一个“data-transition”属性，并选择某种属性值即可，如下所示：
•<a href="a1.htm" rel="external" data-transition="pop">详细页</a>。
12.3：侦听HTML 5画布元素的触摸事件
• 示例
• 功能描述
• 新建一个HTML 页面，在内容区域添加一个<canvas>画布元素。触摸画布 时，将在触摸处绘制一个半径为5的实体小圆心，同时在画布的最上面，显示此次触摸时的坐标数据信息 。
•
• 代码编写与效果演示à
• 源码分析
•在本实例的JavaScript代码中，首先获取页面中的画布元素并保存在变量“cnv”中，并通过画布变量“cnv”取得画布的上下文环境对象保存在变量“cxt”中。接下来，根据文档显示区的宽度与高度计算出画布显示时的宽度与高度，并分别保存在变量“w”和“h”中，再通过attr()方法将这两个值赋予画布元素。
•然后，通过bind()方法绑定画布元素的“tap”事件。在该事件中，先计算画布元素在屏幕中的坐标距离并保存至变量“t”和“l”中。“l”表示横坐标，在计算时该值时，先通过“offsetLeft”属性获取画布元素的左边距离，如果画布元素还存在父容器，则通过“while”语句，将父容器的左边距离与画布元素的左边距离相累加，并将最终值赋予变量“l”；“t”表示纵坐标，同样道理，将计算后的画布上边距离最终值赋予变量“t”。另外，通过“tapX”、“tapY”两个变量分别记录触摸画布时返回的横坐标与纵坐标的值。
• 源码分析（续）
•最后，开始画圆。圆的横坐标为触摸事件返回的横坐标值“tapX”减除 画布在屏幕中的横坐标值“l”，因为“tapX”变量值包含“l”变量值，两者相减后，就是画布中圆的真实横坐标值；同理，变量“tapY”与“t”相减后得到画布中圆的真实纵坐标值；根据获取的圆的坐标值，以5px为半径，在画布中，调用arc()方法，绘制一个360度的圆形，并通过fill()方法为圆形填充设置的颜色，再将圆形的坐标位置显示通过<span>元素显示在页面中。
12.4：使用localStorage传递链接参数
• 示例
• 功能描述
• 新建一个HTML 页面，添加两个“page”容器。当在第一个容器中单击“传值”链接时，通过“localStorage”对象设置该值，页面切换至第二个容器中，并显示“localStorage”对象保存的值 。
•
• 代码编写与效果演示à
• 源码分析
•在本实例的JavaScript代码中，首先，定义一个名为“rttophtml5mobi”的对象，设置一些基础的内容值，在接下来的“install”对象中，定义了两个方法，一个为“setParam”，即调用“localStorage”对象中的setItem()方法设置参数名称和值；另一个为“getParam”，即调用“localStorage”对象中的getItem()方法获取设置的对应参数值。
•然后，在“page1”容器的“pagecreate”事件中，先获取正文区域元素，并设置一个带链接元素的字符串内容，将该内容显示在元素中；同时，使用delegate()方法绑定链接元素的单击事件，在该事件中，调用自定义的setParam()方法设置需要传递的参数值。
• 源码分析（续）
•最后，在“page2”容器的“pagecreate”事件中，先获取正文区域元素，然后调用自定义的getParam()方法获取传递来的参数值，并将它显示在元素中。
•说明 在设置的链接字符串中，先为元素添加了一个“data-id”属性，该属性可以修改为“data-”加任意字母的格式，然后，则可以通过调用data()方法，获取该属性的值 。
