频道栏目
读书频道 > 移动开发 > 其他综合 > jQuery Mobile权威指南
2.3.2 跳转页面
2012-10-12 16:29:46     我来说两句
收藏   我要投稿

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

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

如果使用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所示。


 

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.1 创建页面
下一篇:2.3.3 加载页面
相关文章
图文推荐
排行
热门
最新书评
特别推荐

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

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