jQuery Mobile Pagecontainer remove Event
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.
HTML
<!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;" > w3wiki </ 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;" > w3wiki </ 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:
Reference: https://api.jquerymobile.com/pagecontainer/#event-remove
Contact Us