jQuery移动web开发之页面跳转和加载外部页面的实现_jquery

changePage() 页面跳转

jQuery.mobile.changePage( to [, options ] )

从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现。但要使用此方式的时候,要以点击一个链接或者提交表单来实现。此方法有两个参数。

to:是第一个参数,是必须的,不可缺少。类型:字符串或者对象。

字符串: 绝对或相对URL地址。如:("about/us.html")

对象:
jquery选择器对象,如:($("#about"))。
一个指定了两个页面引用的数组[from,to] ,用以在已知的page进行跳转. From 是当前所能看到的页面( 或者是 $.mobile.activePage )。
发送表单数据的对象,如({to: url, data: serialized form data, type: "get" or "post"} 。

options:是第二个参数,是可选。类型:对象

allowSamePageTransition(布尔值,默认:false)
默认情况下,changePage() 会忽略跳转到已活动的页面的请求。如果把这项设为true,会使之执行。开发者应该注意有些页面的转场会假定一个跳转页面的请求中来自的页面和目标的页面是不同的,所以不会有转场动画。

changeHash(布尔值,默认:true)
判断地址栏的哈希值是否应被更新。

data(字符串 或 对象,默认:undefined)
要通过ajax请求发送的数据,只在changePage() 的 to 参数 是一个地址的时候可用。

dataUrl(字符串,默认:undefined)
完成页面转换时要更新浏览器地址的URL地址。如不特别指定,则使用页面的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)
指定页面请求的时候使用的方法("get" 或者 "post")。只在changePage() 的 to 参数 是一个地址的时候可用。

//以slideup效果 跳转到 "about us" 页面

$.mobile.changePage("about/us.html", "slideup");
//以pop效果 跳转到 "confirm" 页面 并且在url hash里不记录其历史

$.mobile.changePage("../alerts/confirm.html", "pop", false, false);
//跳转到 "search results" 页面,提交id为 "search"的表单数据

$.mobile.changePage({url:"searchresults.php" , type:"get" , data: $("form#search").serialize() });
//将页面url,类型,数据定义为变量来传递。

var pageData = { url: formresults.php, type: 'get', data:$('form#myform').serialize () };

$.mobile.changePage(pageData);
//使用changepage来加载第三个页面

var previousPage = $.mobile.activePage.data ('ui.prevPage');

$.mobile.changePage([previousPage, anotherPreviousPage], 'pop');

loadPage() 加载外部页面

jQuery.mobile.loadPage( url [, options ] )

加载一个外部页面,附加其内容,并将其插入到DOM

url:是第一个参数。是必须的。类型:字符串或者对象。

options:第二个参数。是可选的。类型:对象。

allowSamePageTransition (default: false)
类型:布尔值
默认情况下,changepage()忽略请求改变当前页面。这个选项设置为true,允许请求执行。开发人员应该注意的一些网页过渡假设一个changepage请求设置FromPage、ToPage是不同的,所以他们可能不会如预期的动画。开发人员负责提供适当的过渡,或关闭这个特定的情况下。

changeHash (default: true)
类型:布尔值
如果地址栏中的哈希值应更新

data (default: undefined)
类型:数据或者字符串
要发送的数据与一个AJAX页面请求

loadMsgDelay (default: 50)
类型:数字
被迫延迟(毫秒)显示之前加载信息。这是为了让一个页面已经访问了被从缓存中取得没有加载信息的时间

pageContainer (default: $.mobile.pageContainer)
类型:jQuery选择器
指定要包含的页面元素

reloadPage (default: false)
类型:布尔值
强制刷新页面, 即使当页面容器中的dom元素已经准备好时,也强制刷新。只在changePage() 的 to 参数 是一个地址的时候可用。

role (default: undefined)
类型:字符串
显示页面的时候使用data-role值。默认情况下此参数为认:undefined,依赖于元素的@data-role属性。

showLoadMsg (default: true)
类型:布尔值
加载外部页面时,设定是否显示loading信息。

transition (default: $.mobile.defaultPageTransition)
类型:字符串
使用显示的页面时,过渡

type (default: "get")
类型:字符串
指定页面请求的时候使用的方法("get" 或者 "post")。只在changePage() 的 to 参数 是一个地址的时候可用。

加载一个外部页面,提高其内容,并将其插入到DOM。这种方法被称为内部的changepage()功能时,它的第一个参数是一个URL。这个函数不影响当前页面可以在后台加载页面。该函数返回一个对象,获取延期承诺在该页被增强,插入到文档中的解决。
加载“about/us.html”的页面到DOM

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.loadPage demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>

<div data-role="page">

 <div></div>

</div>
<script>
$.mobile.loadPage( "about/us.html" );
</script>

</body>
</html>

 

加载一个“searchresults.php”页,要发送的表单数据是“search”字符。

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery.mobile.loadPage demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>

<div data-role="page">

 <div></div>

</div>
<script>
$.mobile.loadPage( "searchresults.php", {
 type: "post",
 data: $( "form#search" ).serialize()
});
</script>

</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 移动
, 跳转
外部页面
jquery 加载外部页面、vue 跳转外部页面、jquery 跳转页面、jquery跳转到指定页面、jquery点击跳转页面,以便于您获取更多的相关知识。

时间: 2024-10-12 00:29:27

jQuery移动web开发之页面跳转和加载外部页面的实现_jquery的相关文章

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.4 技巧:使用AJAX加载外部页面

9.4 技巧:使用AJAX加载外部页面 至此,示例加载的页面都是已经存在于HTML中的.它们都是把哈希标记和已经存在于DOM树中的id关联在一起. 随着网站的扩大,在一个HTML中加载所有的页面变得不太可能了.使用jQuery Mobile能很容易地创建指向其他页面的链接,这和普通Web应用程序中的做法是一样的.如代码清单9-4所示,链接是一模一样的. 不同之处在于jQuery Mobile处理链接的方式.当链接地址指向的域和当前页面的域相同,默认是使用AJAX请求加载的.可以通过特定的设置关掉

php-在PHP页面跳转到另外一个页面并且传POST值

问题描述 在PHP页面跳转到另外一个页面并且传POST值 在PHP页面跳转到另外一个页面并且传POST值 求解释 求代码 解决方案 http://bbs.csdn.net/topics/390857158 解决方案二: 什么都不用,就想实现效果! 解决方案三: 直接把post值用header()写入, 最后重新指定Location 解决方案四: 逐步POST,取关键信息,比如说COOKIE,协议头 解决方案五: header的同时 post

javascript-ul li a :hover样式设置后,链接点击后页面跳转,但是原页面,超链接依然处于hover状态

问题描述 ul li a :hover样式设置后,链接点击后页面跳转,但是原页面,超链接依然处于hover状态 如题,ul li a :hover样式设置背景色蓝色,链接点击后页面跳转,但是原页面,超链接背景色依然是蓝色,查看元素发现a仍处于hover状态,请问这种情况如何解决? 解决方案 点击之后是a:visited样式,看看是不是和hover一样了 解决方案二: http://blog.csdn.net/huwenhu2007/article/details/24669631 解决方案三:

Ajax加载外部页面弹出层效果实现方法_AJAX相关

本文实例讲述了Ajax加载外部页面弹出层效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Ajax加载外部页面弹出层效果实现方法

本文实例讲述了Ajax加载外部页面弹出层效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery移动web开发中的页面初始化与加载事件_jquery

页面初始化事件(pagebeforecreate.pagecreate)Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者隐

基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)_jquery

比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par

页面跳转间如何保存页面查询状态

问题描述 我们公司是采用list/Detail的页面逻辑,即list页面有一个DataGrid,列出了一些项,点击其中一项后,页面跳转到Detail页面查看该项的详细.Detail页面有一个返回按钮,点击后即返回到list页面.list中的数据列表通常是经过筛选的,如xxx大于20的,然后还经过了排序的.现在问题是这样的:用户要求,当从Detail返回到list中时,数据列表中的状态不变.公司认为,这是一个合理的要求,因为数据量实在太大,谁都不想返回list就又得从第一页看起.还要求,刚才看的D

jQuery根据用户电脑是mac还是pc加载对应样式的方法_jquery

本文实例讲述了jQuery根据用户电脑是mac还是pc加载对应样式的方法.分享给大家供大家参考.具体实现方法如下: if (navigator.userAgent.indexOf('Mac OS X') != -1) { $("body").addClass("mac"); } else { $("body").addClass("pc"); } 希望本文所述对大家的jQuery程序设计有所帮助. 以上是小编为您精心准备的的内