Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery Mobile panel open Event

  • Last Updated : 06 Jan, 2022

jQuery Mobile is a JavaScript library built on top of jQuery. It is used to create fast and responsive websites or web applications that are accessible on a variety of devices like mobile, tablets, and desktops.

In this article, we will be using the jQuery Mobile Panel open event that is triggered after the panel has opened completely.

Callback Parameters: The callback function accepts an event parameter of type event and a UI Object. The UI object is empty, it is included just for consistency with other events across the jQuery Mobile library.

 

Syntax:

  • Initialize the panel with the open callback specified:

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

    $(".selector").on( "panelopen", 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.

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 is opened when the panel open 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({
                open: function (event, ui) { 
                    alert("Panel open event fired.");
                }
            });
        });
    </script>
</head>
  
<body>
    <div data-role="page">
        <div data-role="header" >
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>jQuery Mobile Panel open event</h3>
        </div>
  
        <div role="main" class="ui-content">
            <center>
                <a href="#divID">Open Panel</a>
            </center>
          </div>>
  
        <div data-role="panel" id="divID">
            <p>Panel Content</p>
        </div>
    </div>
</body>
</html>

Output:

jQuery Mobile panel open Event

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!