Skip to content
Related Articles

Related Articles

jQuery Mobile panel beforeopen Event

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

jQuery Mobile is a Web-technology built on top of jQuery. It is used to make responsive content that can be accessed on a variety of devices like tabs, mobiles, and, desktops.

In this article, we will be using the jQuery Mobile panel beforeopen event that is triggered when the process of opening the panel just starts.

Syntax:

  • Initialize the panel with the beforeopen callback specified:

    $( ".selector" ).panel({
      beforeopen: function( event, ui ) {
          // Your code here.
      }
    });
  •  

  • Bind an event listener to the panelbeforeopen event:

    $(".selector").on( "panelbeforeopen", 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 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, when the panel beforeopen even triggers, an alert box with the message “Panel beforeopen event fired.” appears on the screen.

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


Output:

jQuery Mobile panel beforeopen Event

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!