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>