jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方法做一些总结。系列文章请看jQuery Mobile专栏。jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0。使用pagecontainer部件的change()法代替。
注意该方法是在内部使用的页面加载和转换作为一个结果,点击一个链接或提交表单时。跳转外部页面全部没有效果,必须是内部的DIV页面才有效果。
jQuery.mobile.changePage( to [, options ] )参数解释说明:
to:字符串类型或Object类型,将要跳转到的目的页面。
options:可选参数,Object类型。其对象内的属性解释如下:
allowSamePageTransition:布尔类型,默认为false。默认情况下,changepage()忽略请求改变当前的活动页面。设置为true,允许请求执行。注意的一些页面转换到另一个页面(changepage请求的页和页是不同的),他们可能不会如预期的动画。
changeHash:布尔类型,默认为true。设置为true时地址栏中的Hash更新会创建一个新的浏览器历史记录的影响。设置为false,传入的页面在浏览器历史替换当前页面,用户导航无法通过浏览器的“后退”按钮回到上一个页面。
data:Object类型或字符串类型,默认为 undefined。跳转页面发送ajax请求的参数。
dataUrl:字符串类型,默认为 undefined。完成页面转换时要更新浏览器地址的URL地址。如不特别指定,则使用页面page元素的data-url属性值。
pageContainer:(jQuery选择器,默认:$.mobile.pageContainer)指定应该包含页面的容器。
reloadPage:布尔类型,默认false。强制刷新页面, 即使当页面容器中的dom元素已经准备好时,也强制刷新。只在changePage()的to参数是一个可用地址的时候。
reverse:布尔类型,默认false。设定页面转场动画的方向,设置为true时将导致反方向的转场。
role:字符串类型,默认为 undefined。显示页面的时候使用data-role值。默认情况下此参数为认:undefined,取决于元素的@data-role属性。
showLoadMsg:布尔类型,默认true。设定加载外部页面时是否显示loading信息。
transition:字符串类型,默认为 $.mobile.defaultPageTransition。过渡到其他页面时呈现。
type:字符串类型,默认为get。只有到to的参数被指定时使用。
使用例子如下:添加changehash:假以避免iframe引起的问题。

    1. $.mobile.changePage( "../resources/us.html", {
    2. transition: "slideup",
    3. changeHash: false
    4. });
    5. $.mobile.changePage( "../resources/results.php", {
    6. type: "post",
    7. data: $( "form#search" ).serialize(),
    8. changeHash: false
    9. });
    10. $.mobile.changePage( "../resources/confirm.html", {
    11. transition: "pop",
    12. reverse: false,
    13. changeHash: false
    14. });
    15. //以slideup效果 跳转到 "about us" 页面
    16. $.mobile.changePage("about/us.html", "slideup");
    17. //以pop效果 跳转到 "confirm" 页面 并且在url hash里不记录其历史
    18. $.mobile.changePage("../alerts/confirm.html", "pop", false, false);
    19. //跳转到 "search results" 页面,提交id为 "search"的表单数据
    20. $.mobile.changePage({url:"searchresults.php" , type:"get" , data: $("form#search").serialize() });
    21. //将页面url,类型,数据定义为变量来传递。
    22. $.mobile.changePage({ url: formresults.php, type: 'get', data:$('form#myform').serialize () });
    23. //使用changepage来加载第三个页面
    24. $.mobile.changePage([$.mobile.activePage.data ('ui.prevPage'), anotherPreviousPage], 'pop');

jQuery Mobile中jQuery.mobile.changePage方法使用详解的更多相关文章

  1. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  2. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

    请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...

  3. asp.net中C#对象与方法 属性详解

    C#对象与方法 一.相关概念: 1.对象:现实世界中的实体 2. 类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装  继承 多态 二.类的定义与语法 1.定义类: 修饰符 类名称 ...

  4. Lua中强大的元方法__index详解

    今天要来介绍比较好玩的内容:__index元方法 我是备胎,记得回头看看 咳咳,相信每一位女生都拥有或者不知不觉中拥有了一些备胎,啊!当然,又或许是成为过别人的备胎. 没有备胎的人,就不是完整的人生. ...

  5. jquery getScript动态加载JS方法改进详解[转载]

    转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript( ...

  6. jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

    请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, w ...

  7. jquery getScript动态加载JS方法改进详解

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当 ...

  8. ECMAScript5中新增的Array方法实例详解

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.(注意兼容性) 在ES5中,一共有9个Array方法:http://kangax.githu ...

  9. vue中 localStorage的使用方法(详解)

    vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...

随机推荐

  1. JAVA获取5位随机数

    package baofoo.utils; import org.junit.Test; import java.text.SimpleDateFormat; import java.util.Dat ...

  2. 阿里云CentOS7.3配置Java Web应用和Tomcat步骤

    阿里云的Linux系统包括CentOS7.3配置了密钥对 怎样将自己ECS实例绑定密钥对,并启用秘钥: https://help.aliyun.com/document_detail/51798.ht ...

  3. Python Djan 路由对应的名称

    路由关系命名 对URL路由关系进行命名,以后可以根据此名称生成自己想要的URL 1. url(r'fdsafdsaeeeee',views.index, name='hello') #给这个url后面 ...

  4. Window ssh免密登录到远程Linux服务器

    SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统. 1. 基于口令的安全验证 这种方式使用用户名密码进行联机登录,一般情况下我们使用的都是这种方式.整个过程大致如下: (1)客户端发起连 ...

  5. 【PyQt5 学习记录】003:水平布局和获取屏幕尺寸

    #!/usr/bin/python3 # -*- coding:utf-8 -*- import sys from PySide2.QtWidgets import (QApplication, QW ...

  6. hihernate一对多关联映射

    hihernate一对多关联映射 一对多关联映射利用了多对一关联映射原理 多对一关联映射:在多的一端加入一个外键指向一的一端,它维护的关系是多指向一 一对多关联映射:在多的一端加入一个外键指向一的一端 ...

  7. CAD增强属性块的还原(转)

    来自:http://blog.3snews.net/space.php?uid=13924959&do=blog&id=70174 作者:毛毛虫 Demo下载:CAD增强属性块的还原 ...

  8. 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异[转]

    看的文章来自: https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs 使用 ...

  9. CentOS7运维管理笔记(12)----修改主机名

    CentOS修改主机名 CentOS7和CentOS6.5 修改主机名的方法略有不同. 通过 hostname 命令可以查看当前的主机名. 1. 临时修改主机名 通过 'hostname 新的主机名' ...

  10. IoT Gateway Based on OSGi

    1. OSGi Knowleage 2. OSGi.Net on Windows 3. OSGi with JAVA 4. OSGi with Qt and C++ 5. Architecture o ...