Skip to content
Related Articles

Related Articles

jQuery Mobile Pagecontainer beforehide Event

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Mar, 2022
View Discussion
Improve Article
Save Article

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.

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;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Pagecontainer beforehide 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="Invoke the beforehide Event">
  
            <div id="log"></div>
        </div>
          
        <div data-role="page" id="GFG2">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
  
            <h3>jQuery Mobile Pagecontainer beforehide 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="Invoke the beforehide Event">
  
            <div id="log"></div>
        </div>
    </center>
      
    <script>
        $(document).ready(function () {
            $("#Button").on('click', function () {
                $("#GFG1").pagecontainer({
                    beforehide: function (event, ui) { }
                });
                $("#GFG1").on("pagecontainerbeforehide",
                    function (event, ui) { });
                $("#log").html(
                    'beforehide event has been triggered');
            });
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Pagecontainer beforehide Event

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!