jQuery Mobile Pagecontainer beforehide 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 beforehide event. This event is triggered before the actual transition animation is kicked off.

Syntax: Initializing the pagecontainer with the beforehide event.

$( ".selector" ).pagecontainer({
 beforehide: function( event, ui ) {}
});

Binding an event listener to the pagecontainer beforehide event.

$( ".selector" ).on( 
 "pagecontainerbeforehide", 
 function( event, ui ) {} 
);

Parameters: This event accepts two parameters that are illustrated below:

• event: It is the specified event.
• ui: This parameter accepts some values that are given below:
  • nextPage: It is a jQuery collection object containing the destination page DOM element.
  • toPage: It is a jQuery collection object containing the destination page DOM element.
  • prevPage: It is a jQuery collection object containing the from page DOM element.

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 beforehide event.

Output:

👁 Image

Reference: https://api.jquerymobile.com/pagecontainer/#event-beforehide