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 remove event. This event is triggered just before the framework attempts to remove an external page from the specified DOM.
Syntax: Initializing the pagecontainer with the remove event.
$( ".selector" ).pagecontainer({
remove: function( event, ui ) {}
});-
Binding an event listener to the pagecontainer remove event.
$( ".selector" ).on( "pagecontainerremove", function( event, ui ) {} );
Parameters: This event accepts two parameters that are illustrated below:
- event: This is the specified event.
- ui: This parameter accepts two values that are “toPage” and “prevPage”. The “toPage” is a jQuery collection object that contains the destination page DOM element and “prevPage” is a page that is about to be removed.
CDN Link: First, add jQuery Mobile scripts needed for 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 jQuery Mobile Pagecontainer remove event.
<!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 remove Event</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>
<input type="button" id="Button" value="Remove the external page">
<div id="log"></div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Pagecontainer remove Event</h3>
<div data-role="header">
<h1>Second Page</h1>
</div>
<div role="main">
<a href="#GFG1" data-rel="back" data-transition="slide">Go Back To First Page</a>
</div>
<input type="button" id="Button" value="Remove the external page">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
$("#GFG1").pagecontainer({
remove: function (event, ui) { }
});
$("#GFG1").on("pagecontainerremove", function (event, ui) { });
$("#log").html('External page from the DOM has been removed.');
});
});
</script>
</body>
</html>
|
Output:
jQuery Mobile Pagecontainer remove Event
Reference: https://api.jquerymobile.com/pagecontainer/#event-remove