极客教程jQuery Mobile Pagecontainer change()方法
jQuery Mobile是一种基于网络的技术，用于制作可在所有智能手机、平板电脑和台式机上访问的响应式内容。
在这篇文章中，我们将使用jQuery Mobile Pagecontainer change() 方法。这个方法是用来从一个页面换到另一个页面。
语法:
- 要调用改变方法。
$( ".selector" ).pagecontainer( "change" );
- 以编程方式从一个页面换到另一个页面。
$( ":mobile-pagecontainer" )
.pagecontainer( "change", "confirm.html", { role: "dialog" } );
参数：该方法接受以下参数。
- to。这个参数是我们要导航的URL字符串。
- options。该方法接受以下选项。
- allowSamePageTransition:这个参数的默认值是false。它忽略了改变到当前活动页面的请求。如果这个值被设置为 “true”，它允许请求的执行。
- changeHash。这个参数是为了创建一个新的浏览器历史条目，作为导航序列的一部分。
- data。这个参数是Ajax页面请求时要发送的数据。
- dataUrl : 这个参数是在change()完成后更新浏览器位置时使用的URL。
- loadMsgDelay : 这个参数是延迟加载信息出现的毫秒数。
- reloadPage : 这个参数用于强制重新加载页面，即使它已经在DOM中。这个参数只在’url’参数是一个URL时使用。
- reload : 这个参数用于强制重新加载页面，即使它已经在DOM中。这个参数只在’url’参数是一个URL时使用。
- reverse : 这个参数是布尔类型的值。它用于设置过渡是否应被反向应用。
- role : 这个参数是显示页面时要使用的数据角色值。
- showLoadMsg : 这个参数是布尔类型的值。它用于设置是否显示表明页面正在加载的信息。
- transition：这个参数是应该用于页面变化的过渡。
- type :这个参数是要使用的HTTP请求的类型（”get”，”post”，等等）。这个参数只在’to’参数是一个URL时使用。
返回类型 。该方法的返回类型是一个对象。
CDN链接：你的项目将需要以下jQuery Mobile脚本，所以我们需要将这些脚本添加到你的项目中。
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
例子：这个例子描述了jQuery Mobile Pagecontainer change() Method.的用途。
<!doctype html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page" id="GFG1">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer change() Method</h3>
<div data-role="header">
<h1>First Page</h1>
</div>
<div role="main">
<a href="#GFG2" data-transition="slide">
Go To Second Page</a>
</div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer change() Method</h3>
<div data-role="header">
<h1>Second Page</h1>
</div>
<input type="button" id="Button"
value="Change to First Page">
</div>
</center>
<script>
(document).ready(function () {
("#Button").on('click', function () {
(":mobile-pagecontainer")
.pagecontainer( "change",("#GFG1" ));
});
});
</script>
</body>
</html>
输出:
jQuery Mobile Pagecontainer change()方法