1.3 jQuery Mobile应用开发迅速上手_jQueryMobile权威指南-QQ阅读男生玄幻网

书名：jQueryMobile权威指南
作者名：陶国荣
本章字数：1639字
更新时间：2023-07-12 18:19:13

1.3 jQuery Mobile应用开发迅速上手

jQuery Mobile的工作原理是：提供可触摸的UI小部件和AJAX导航系统，使页面支持动画式切换效果。以页面中的元素标记为事件驱动对象，当触摸或单击时进行触发，最后在移动终端的浏览器中实现一个个应用程序的动画展示效果。

与开发桌面浏览中的Web页面相似，构建一个jQuery Mobile页面也十分容易。jQuery Mobile通过<div>元素组织页面结构，根据元素的“data-role”属性设置角色。每一个拥有“data-role”属性的<div>元素就是一个容器，它可以放置其他的页面元素。接下来通过一个简单实例详细介绍如何开发第一个jQuery Mobile页面。

实例1-1 Hello World页面的实现

1.功能说明

使用HTML 5结构编写一个jQuery Mobile页面，在页面中输出“Hello World!”字样。

2.实现代码

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

代码清单1-1 Hello World页面的实现

<!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 id="page1" data-role="page">
   <div data-role="header"><h1>jQuery Mobile</h1></div>
   <div data-role="content" class="content">
      <p>Hello World!</p>
   </div>
   <div data-role="footer"><h1>荣拓工作室版权所有</h1></div>
</div>
</body>
</html>

3.页面效果

为了更好地在PC端浏览jQuery Mobile页面在移动终端的执行效果，可以下载Opera公司的移动模拟器Opera Mobile Emulator，下载地址：http://cn.opera.com/developer/tools/mobile/，目前最新的版本为12.0。本书全部的页面效果都在Opera Mobile Emulator 12.0中演示。

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

图1-2 Hello World页面

4.源码分析

在页面代码的<head>头部元素中，先通过<meta>标记的“content”属性设置页面的宽度与模拟器的宽度一致，以保证页面可以在浏览器中完全填充；接下来，导入了三个框架性文件，需要注意它们导入时的顺序。

在代码的<body>主体元素中，通过多个<div>元素进行层次的划分。因为在jQuery Mobile中每个<div>元素都是一个容器，根据指定的“data-role”属性值，确定容器对应的身份，如果属性“data-role”的值为“header”，则该<div>元素的为头部区域。

“data-role”属性是HTML 5的一个新特征，通过设置该属性，jQuery Mobile就可以很快地定位到指定的元素，并对内容进行相应的处理。

由于jQuery Mobile已经全面支持HTML 5结构，因此，<body>主体元素的代码也可以修改为以下代码：

<section id="page1" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>Hello World!</p>
   </div>
   <footer data-role="footer"><h1>荣拓工作室版权所有</h1></footer>
</section>

上述代码执行后的效果与修改前完全相同。

实例1-2 多页面的切换

通过实例1-1可以知道，在jQuery Mobile中，如果将页面元素的“data-role”属性值设置为“page”，则该元素成为一个容器，即页面的某块区域。在一个页面中，可以设置多个元素成为容器，虽然元素的“data-role”属性值都为“page”，但它们对应的Id号不允许相同。

在jQuery Mobile中，将一个页面中的多个容器当作多个不同的页面，它们之间的界面切换是通过增加一个<a>元素、并将该元素的“href”属性值设为“#”加对应Id号的方式来进行。下面通过一个简单实例来说明多页面切换实现的过程。

1.功能说明

使用HTML 5结构编写一个jQuery Mobile页面，在页面中设置两个“page”区域，当单击第一个区域中的“详细页”链接时，进入第二个区域；在第二个区域中，单击“返回首页”链接时，则切换至第一个区域。

2.实现代码

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

代码清单1-2 多页面的切换

<!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>
<section id="page1" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是首页</p>
      <p><a href="#page2">详细页</a></p>
   </div>
   <footer data-role="footer"><h1>荣拓工作室版权所有</h1></footer>
</section>
<section id="page2" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是详细页</p>
      <p><a href="#page1">返回首页</a></p>
   </div>
   <footer data-role="footer"><h1>荣拓工作室版权所有</h1></footer>
</section>
</body>
</html>

3.页面效果

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

图1-3 多页面间的切换

4.源码分析

在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>

上述代码表示，单击“详细页”链接时，将以弹出的动画效果跳转至文件名为“a1”的HTML页面。更多<a>元素的“data-transition”属性值如表1-1所示。

表1-1 <a>元素的“data-transition”属性值

说明当页面进行切换时，切换前的页面将自动隐藏，链接的区域或页面自动展示在当前页面中。如果是内链接，仅显示指定Id号并且“data-role”属性值为“page”的区域，其他范围都隐藏。