当前位置:小鱼儿玄机二站 > 操作系统 > jQuery移动web开采之页面跳转和加载外界页面包车

jQuery移动web开采之页面跳转和加载外界页面包车

文章作者:操作系统 上传时间:2019-09-03

changePage() 页面跳转

jQuery Mobile中jQuery.mobile.changePage方法运用详解

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。达成页面调换时要更新浏览器地址的U揽胜L地址。如不特别钦定,则动用页面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');

Mobile中jQuery.mobile.changePage方法运用详解 jQuery.mobile.changePage方法用的照旧多数的。作为三个好手,有必要对jQuery mobile中实用方法做一些...

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

从一个页面跳转到另三个页面,使用$.mobile对象的changePage方法来促成。但要使用此格局的时候,要以点击多少个链接或许提交表单来实现。此办法有五个参数。

to:是首先个参数,是必需的,不可缺点和失误。类型:字符串可能指标。

字符串: 绝对或相对U本田UR-VL地址。如:("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)
造成页面转变时要创新浏览器地址的UEnclaveL地址。如不非常钦点,则动用页面包车型大巴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()成效时,它的首先个参数是叁个U奥迪Q5L。那一个函数不影响当下页面可以在后台加载页面。该函数重回二个指标,获取延期承诺在该页被升高,插入到文书档案中的化解。
加载“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移动和复制dom节点实用DOM操作案例
  • jQuery拖动div、移动div、弹出层实现原理及示范
  • 依据jquery的从一个页面跳转到另三个页面包车型大巴钦定地点的贯彻代码(带平滑移动的效用)
  • jQuery 移动端artEditor富文本编辑器
  • jQuery插件实现适用于运动端的地址选取器
  • jQuery操作dom落成弹出页面遮罩层(web端和移动端阻止遮罩层的滑行)
  • jquery完毕活动端点击图片查看大图特效
  • jquery使用animate方法达成调控作而成分移动
  • jquery实现tr成分的内外移动示例代码
  • 依据jquery实现左右光景运动效果

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:jQuery移动web开采之页面跳转和加载外界页面包车

关键词: