2.3 页面的脚本

jQuery Mobile中通过AJAX请求的方式加载页面，在编写页面脚本时，需要与PC端开发页面区分开。通常情况下，页面在初始化时会触发pagecreate事件，在该事件中可以做一些页面组件初始化的动作；如果需要通过JavaScript代码改变当前的工作页面，可以调用jQuery Mobile中提供的changePage()方法，此外，还可以调用loadPage()方法来加载指定的外部页面，注入当前文档中。接下来我们逐一对这些常用的页面脚本中的事件与方法进行介绍。

2.3.1 创建页面

在jQuery Mobile中，页面是被请求后注入当前的DOM结构中，因此，jQuery中提及的$(document).ready()事件在jQuery Mobile中不会被重复执行，只有在初始化加载页面时才会被执行一次。如果要跟踪不同页面的内容注入当前的DOM结构，可以将页面中的“page”容器绑定pagecreate事件。该事件在页面初始化时触发，绝大多数的jQuery Mobile组件都在该事件之后进行一些数据的初始化。

实例2-7 jQuery Mobile中的pagecreate事件

1.功能说明

新建一个HTML页面，添加一个Id号为“e1”的“page”容器，并将该容器与pagebeforecreate和pagecreate事件进行绑定。在页面执行时，通过绑定的事件跟踪执行的过程。

2.实现代码

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

代码清单2-7 jQuery Mobile中的pagecreate事件

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile中的pagecreate事件</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>
    <script type="text/javascript">
        $("#e1").live("pagebeforecreate",function(){
            alert("正在创建页面！");
        })
        $("#e1").live("pagecreate",function(){
            alert("页面创建完成！");
        })
    </script>
</head>
<body>
  <div data-role="page" id="e1">
    <div data-role="header"><h1>创建页面</h1></div>
    <div data-role="content">
         <p>页面创建完成！</p>
    </div>
    <div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3.页面效果

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

图2-7 页面中的pagebeforecreate与pagecreate事件

4.源码分析

在本实例中，Id号为“e1”的“page”容器绑定了pagebeforecreate和pagecreate两个事件。pagebeforecreate事件早于pagecreate事件，即在页面被加载、jQuery Mobile组件开始初始化前触发。通常在这一事件中，可以添加一些页面加载的动画提示效果，直到pagecreate事件触发时动画效果结束。

在本实例的JavaScript代码中，既可以使用live()方法绑定元素触发的事件，还可以使用bind()与delegate()方法为绑定的元素添加指定的事件。

2.3.2 跳转页面

如果使用JavaScript代码切换当前显示的页面，可以调用jQuery Mobile中的changePage()方法。该方法可以设置跳转页面的URL地址、跳转时的动画效果和需要携带的数据，接下来通过一个简单的实例详细说明该方法的使用过程。

实例2-8 使用changePage()方法跳转页面

1.功能说明

新建一个HTML页面，在页面中显示“页面正在跳转中…”文字，然后调用changePage()方法，从当前页以“slideup”的动画切换效果跳转到“about.htm”页面。

2.实现代码

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

代码清单2-8 jQuery Mobile中的changePage()方法

<!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>
    <script type="text/javascript">
        $(function(){
            $.mobile.changePage("about.htm",
            { transition:"slideup" });
        })
    </script>
</head>
<body>
  <div data-role="page" id="e1">
   <div data-role="header"><h1>跳转页面</h1></div>
   <div data-role="content">
        <p>页面正在跳转中...</p>
   </div>
   <div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3.页面效果

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

图2-8 使用changePage()方法动态跳转页面

4.源码分析

在本实例中，由于changePage()方法在页面加载时被执行，因此，在浏览主页面时，便直接跳转至目标页“about.htm”；使用changePage()方法除了可以跳转页面外，还能携带数据传递给跳转的目标页，如下面代码所示：

$.mobile.changePage("login.php",
  { type:"post",
    data:$("form#login").serialize()
  },
   "pop",false,false
)

上述代码表示：将Id号为“login”的表单数据进行序列化后，传递给“login.php"页面进行处理。另外，“pop”表示跳转时的页面效果，第一个“false”值表示跳转时的方向，如果为“true”则表示反方向进行跳转，默认值为“false”；第二个“false”值表示完成跳转后是否更新历史浏览记录，默认值为“true”，表示更新。

说明 当指定跳转的目标页面不存在或传递的数据格式不正确时，都会在当前页面出现一个错误信息提示框，几秒钟后自动消失，不影响当前页面的内容显示。

2.3.3 加载页面

在2.2.1节中，通过添加元素的“data-prefetch”属性，实现预加载指定链接页面的功能；除此之外，如果想使用JavaScript方法动态加载任意指定的页面，可以调用jQuery Mobile提供的loadPage()公共方法，其实现的最终效果与设置元素的属性一样，都可以使当前页在加载完成后自动将目标页面注入至DOM中。

实例2-9 使用loadPage()方法加载页面

1.功能说明

新建一个HTML页面，调用jQuery Mobile中的loadPage()方法加载“about.htm”页面。加载完成后，单击显示的链接字符，可以切换至“about.htm”页面。

2.实现代码

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

代码清单2-9 使用loadPage()方法加载页面

<!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>
    <script type="text/javascript">
        $(function(){
            $.mobile.loadPage("about.htm");
        })
    </script>
</head>
<body>
  <div data-role="page" id="e1">
   <div data-role="header"><h1>加载页面</h1></div>
   <div data-role="content">
        <p>页面已加载成功！<a href="about.htm">点击</a></p>
   </div>
   <div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3.页面效果

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

图2-9 使用loadPage()方法加载指定页面

4.源码分析

在本实例中，通过调用jQuery Mobile中提供的loadPage()方法，可以将任意页面加载到当前的DOM中。执行完该方法后，pagecreate事件将会被重新触发，因为整个DOM的结构发生了变化，指定的目标页面已注入当前文档中，这时可以通过查看当前页面的源代码查找被加载的目标页面内容，如图2-9所示。

上一章目录下一章