jQuery移动web开发之页面跳转和加载外部页面的实现
投稿：goldensun
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery移动web开发之页面跳转和加载外部页面的实现,以changePage()和loadPage()方法的使用为主,需要的朋友可以参考下
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"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&jQuery.mobile.loadPage demo&/title&
&link rel="stylesheet" href="/mobile/1.3.0/jquery.mobile-1.3.0.min.css"&
&script src="/jquery-1.9.1.min.js"&&/script&
&!-- The script below can be omitted --&
&script src="/resources/turnOffPushState.js"&&/script&
&script src="/mobile/1.3.0/jquery.mobile-1.3.0.min.js"&&/script&
&div data-role="page"&
&div&&/div&
$.mobile.loadPage( "about/us.html" );
加载一个“searchresults.php”页，要发送的表单数据是“search”字符。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&jQuery.mobile.loadPage demo&/title&
&link rel="stylesheet" href="/mobile/1.3.0/jquery.mobile-1.3.0.min.css"&
&script src="/jquery-1.9.1.min.js"&&/script&
&!-- The script below can be omitted --&
&script src="/resources/turnOffPushState.js"&&/script&
&script src="/mobile/1.3.0/jquery.mobile-1.3.0.min.js"&&/script&
&div data-role="page"&
&div&&/div&
$.mobile.loadPage( "searchresults.php", {
type: "post",
data: $( "form#search" ).serialize()
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具正文 jquery mobile使用和感受
jquery mobile使用和感受
发布时间： & 编辑：
jquery中文网为您提供jquery mobile使用和感受等资源，欢迎您收藏本站，我们将为您提供最新的jquery mobile使用和感受资源
图标是UI设计中比较重点的一个体现。下面举一个例子使用
&a hef=”” data-icon=”home” data-iconpos=”left” data-theme=”c”&首页&/a&
jquery mobile的资源站
JQM 案例展示：
其中例子不断在更新中…有些站点需要翻墙才能打开..
JQM 滚动条插件iScroll-4
JQM 弹出插件
开源移动设备检测脚本
JQM日期插件
Site： (推荐)
Site： （类似）
jqmobile web 程序展示，单击图片，然后点右下角的链接。
小插件，手机,pad上的布局
一个例子，包括播放MP3，文档下载。
JQM google地图应用
图片/div滑动
图片切换photoswipe
描述：在手机上操作很流畅，能自使用屏幕尺寸，竖屏显示效果很好，横屏图片太大了，也就是列数固定的原因。
图片遮罩类似lightbox: Touch-Gallery
描述：一个图片箱子插件，点击图片放大，周围变黑遮罩，双击周围返回列表。
Mobile实现驾驶导航
Mobile Photo Album
更多插件资源
30+最好的JQuery画廊插件：
240个Jquery 插件：
Jquery 官方插件：
jqueryMobile 插件和 Demo：
常见问题解答：
jQM如何固定header和footer，只滚动content部分？
JQM基础–用户登录，注册
JQM 页面传参
&您可能感兴趣的文章：解决 iframe 在 iPad 上不能滚动的问题
今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。&
但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用。&
怎么让ipad safari 中的iframe的内容在固定大小中可滚动？&
网上说要用seamless属性。直接写个seamless。但是这个属性ipad的safari不支持。chrome是支持的。&
IE6 – Windows: no support&
IE7 – Windows: no support&
IE8 – Windows – Windows: no support&
IE9 beta – Windows: no support&
Firefox 3.6 – Windows: no support&
Firefox 3.6 – OSX: no support&
Firefox 4.0 – beta Windows: no support&
Firefox 4.0 – beta OSX: no support&
Safari OSX: no support&
Chrome 7 – Windows: no support&
Chrome 7 – Windows: no support&
Chrome 9 – OSX: no support&
Opera 11 – OSX: no support&
测试例子：&
.au/jobs/example-seamless/&
所以以上方法都无法解决ipad safari中iframe滚动的问题。&
解决办法：&
在iframe外加一层div，设置样式-webkit-overflow-scrolling: overflow:&
让超出div的内容可以通过touch来滚动。&
另外，如果iframe的src不是网址，而是本地的html，则需要给HTML的DOM添加监听事件，让html的body可以监听到touch事件，让嵌套的html也可以滚动。
var toScrollFrame = function(iFrame, mask) {
if (!navigator.userAgent.match(/iPad|iPhone/i))
//do nothing if not iOS devie
var mouseY = 0;
var mouseX = 0;
jQuery(iFrame).ready(function() {//wait for iFrame to load
//remeber initial drag motition
jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {
mouseY = e.targetTouches[0].pageY;
mouseX = e.targetTouches[0].pageX;
//update scroll position based on initial drag position
jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {
e.preventDefault();
//prevent whole page dragging
var box = jQuery(mask);
box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);
box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);
//mouseX and mouseY don't need periodic updating, because the current position
//of the mouse relative to th iFrame changes as the mask scrolls it.
toScrollFrame('.myFrame', '.myMask');
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0&&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&title&wrapScroller demo&/title&
&link rel=&stylesheet& href=&../style/wrapScroller.css& type=&text/css& media=&screen& /&
&script type=&text/javascript& src=&../jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript&&
&body style=&background: #&&
HEADER - use 2 fingers to scroll contents:
&div id=&scrollee& style=&width:300height:300-webkit-overflow-scrolling: overflow:&&
&iframe id=&object& height=&90%& width=&100%& type=&text/html& src=&http://en.wikipedia.org/&&&/iframe&
本文已收录于以下专栏：
相关文章推荐
原文链接: Scroll IFRAMEs on iOS原文日期: 日 翻译日期: 日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的元素将不...
项目中有个需求时在页面的最下面有一排按钮，这排按钮需要固定到页面的最下面，不能随着屏幕的滚动为滚动。
功能是使用css的position: bottom:0;属性设置的。
AI时代，机器学习该如何入门？
对于机器学习，很多人的观点是：机器学习技术是今后所有技术人员都绕不过的一个门槛。 那么，普通程序员该学习机器学作为一名对机器学习心有向往的程序员，我该以什么样的姿势开始呢？
iframe 问题 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示  父页面：修改为...
要实现这个效果很简单，只需要加一行css代码即可：
-webkit-overflow-scrolling :
可用以下网页测试：
完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
好久木有写点东西了，最近一直忙着开发，本来想晚上干完活后还想再做点什么有意义的事，直接累趴下了，今天趁着有时间赶快把这个解决问题的过程记录下来，备以后参考，也给其他遇到同样问题的朋友一个思...
今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属...
1、H5表单禁止复制、粘贴的方法
（1）、HTML
//禁止复制：
type=text value=&fdg& size=50 onselectstart=&return false&&
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)jQuery.mobile.changePage方法用的还是很多的。作为一个老手，有必要对jQuery mobile中实用方法做一些总结。系列文章请看jQuery Mobile专栏。jquery.mobile.changep
jQuery.mobile.changePage方法用的还是很多的。作为一个老手，有必要对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引起的问题。$.mobile.changePage( "../resources/us.html", {
transition: "slideup",
changeHash: false
$.mobile.changePage( "../resources/results.php", {
type: "post",
data: $( "form#search" ).serialize(),
changeHash: false
$.mobile.changePage( "../resources/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
//以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，类型，数据定义为变量来传递。
$.mobile.changePage({ url: formresults.php, type: 'get', data:$('form#myform').serialize () });
//使用changepage来加载第三个页面
$.mobile.changePage([$.mobile.activePage.data ('ui.prevPage'), anotherPreviousPage], 'pop');
版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】集合阿里巴巴、阿里云技术干货！历届云栖社区在线峰会技术荟萃专题出炉，赶紧收藏吧~&&
消息队列（Message Queue，简称MQ）是阿里云商用的专业消息中间件，是企业级互联网架构的核心产品，基于...
是为多媒体数据提供的转码计算服务。它以经济、弹性和高可扩展的音视频转换方法，将多媒体数据转码成适合在PC、TV以...
是基于语音识别、语音合成、自然语言理解等技术，为企业在多种实际应用场景下，赋予产品“能听、会说、懂你”式的智能人...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
2017杭州云栖大会火热抢票
Loading...