Skip to content
Related Articles

Related Articles

jQuery Mobile panel close Event

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

jQuery Mobile is a JavaScript library used for creating responsive and accessible web applications for mobiles, tabs, desktops, etc. In this article, we will be using the jQuery Mobile Panel close event that is triggered after the panel has closed completely.

 

Syntax:

  • Initialize the panel with the close callback specified:

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

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

Parameters: It accepts a callback function that holds 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 jQuery Mobile.

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, we change the text of the paragraph with id “write” when the panel close 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 () {
            $("#divID").panel({
                close: function (event, ui) { 
                    $("#write").text("Panel close event fired.")
                }
            });
        });
  
        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 close event</h3>
        </div>
  
        <div role="main" class="ui-content">
            <center>
                <a href="#divID">Open Panel</a>
  
                <p style="background-color:green; 
                          color:white;" id="write">
                </p>
  
            </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-close


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!