Skip to content
Related Articles

Related Articles

jQuery Mobile panel beforeclose Event

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

jQuery Mobile is a set of HTML5 based user interface systems that is built on top of jQuery. It is used for creating responsive and accessible websites and web apps for a variety of devices like mobiles, tablets, laptops, and desktops.

In this article, we will be using the jQuery Mobile panel beforeclose event that triggers when the process of closing the panel starts.

Syntax:

  • Initialize the panel with beforeclose callback specified:

    $( ".selector" ).panel({
      beforeclose: function( event, ui ) {
          // Your code here
      }
    });
  • Bind an event listener to the panelbeforeclose event:

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

Parameters: It accepts a callback function that has two parameters:

  • event: It accepts Event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events across the library.

CDN links:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

Example: In the example below, an alert box appears when the beforeclose event is fired.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
   </script>
  
    <script>
        $(document).ready(function () {
            
             // Initialize the panel with
              // beforeclose callback specified
            $("#divID").panel({
                beforeclose: function (event, ui) {
                    alert("Panel beforeclose event fired.")
                }
            });
        });
          
          // A function to close the panel.
        function closePanel() {
            $("#divID").panel("close");
        }
    </script>
</head>
  
<body>
    <div data-role="page">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>jQuery Mobile Panel beforeclose event</h3>
        </div>
  
        <div role="main" class="ui-content">
            <center>
                <a href="#divID">Open Panel</a>
            </center>
        </div>
        <div data-role="panel" id="divID">
            <button onclick="closePanel();">Close Panel</button>
        </div>
    </div>
</body>
</html>

Output:

jQuery

Reference: https://api.jquerymobile.com/panel/#event-beforeclose


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!