jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.
In this article, we will be using the jQuery Mobile Pagecontainer change() Method. This method is used to change from one page to another page.
Syntax:
-
To invoke the change method:
$( ".selector" ).pagecontainer( "change" );
-
Programmatically change from one page to another.
$( ":mobile-pagecontainer" ) .pagecontainer( "change", "confirm.html", { role: "dialog" } );
Parameter: This method accepts the following parameters:
- to: This parameter is the URL as a String to which we want to navigate.
-
options: This method accepts the following options:
- allowSamePageTransition: The default value of this parameter is false. It ignores requests to change to the currently active page. If this value is set to true, it allows the request to execute.
- changeHash: This parameter is to create a new browser history entry as part of the navigation sequence.
- data: This parameter is the data to send with an Ajax page request.
- dataUrl: This parameter is the URL that is used when updating the browser location upon change() completion.
- loadMsgDelay: This parameter is the number of milliseconds by which to delay the appearance of the loading message.
- reloadPage: This parameter is used to force a reload of the page even when it is already in the DOM. This parameter is used only when the ‘url’ argument is a URL.
- reload: This parameter is used to force a reload of the page even when it is already in the DOM. This parameter is used only when the ‘url’ argument is a URL.
- reverse: This parameter is the boolean type value. It is used to set whether the transition shall be applied in reverse.
- role: This parameter is the data-role value to be used when displaying the page
- showLoadMsg: This parameter is the boolean type value. It is used to set whether to display a message indicating that the page is loading.
- transition: This parameter is the transition that should be used for the page change
- type: This parameter is the type of HTTP request to use (“get”, “post”, etc.). This parameter is used only when the ‘to’ argument is a URL.
Return type: The return type of this method is an object.
CDN Link: The following jQuery Mobile scripts will be needed for your project so we need to add these scripts to your project.
<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>
Example: This example describes the uses of the 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>
|
Output:
jQuery Mobile Pagecontainer change() Method
Reference: https://api.jquerymobile.com/pagecontainer/#method-change