jQuery Mobile-页面跳转

最新推荐文章于 2024-03-17 00:09:41 发布

imLagre

最新推荐文章于 2024-03-17 00:09:41 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jquery mobile 跳转

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. a 标签跳转

当我们的网站引用了jquery mobile的js后，点击页面的链接，你会发现页面无法跳转，因为jquery mobile默认是采用ajax方式来加载网站的，如果你需要跳到另一个页面，需要在a标签加上data-ajax="false"。

在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数,但同时也会导致许多移动设备运行缓慢。 jQueryMobile将页面所有的链接跳转都视作Ajax调用,这样可以充分利用CSS的过渡效果,当你想要链接到你自己的web程序之外的某些链接时,你可以这样编写你的链接代码:

如上所示,仅需要为a标签添加 rel="external"属性即可。然而jQueryMobile对于(同域的)外部链接并不是简单地跳转完事儿,相比于其他移动框架它更进了一步, 因为他对(同域的)所有链接都采用Ajax调用方式,从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。

转自：http://www.cnblogs.com/changlun/p/4566282.html

2. jQuery 跳转

如果使用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”，表示更新。

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

转自：https://my.oschina.net/shunshun/blog/132726

imLagre

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile-页面跳转

1. a 标签跳转当我们的网站引用了jquery mobile的js后，点击页面的链接，你会发现页面无法跳转，因为jquery mobile默认是采用ajax方式来加载网站的，如果你需要跳到另一个页面，需要在a标签加上data-ajax="false"。在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数,但同时也会导致许多移动设备运行缓慢。 jQ
复制链接

扫一扫

专栏目录