jQuery Mobile panel create Event

Last Updated : 12 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and web apps that are accessible on devices of various screen sizes like smartphones, tablets, and desktops. It is built on top of jQuery.

In this article, we will be using the jQuery Mobile panel create event which triggers when a panel is created.

Syntax:

Initialize the panel with the create callback specified:

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

Bind an event listener to the panelcreate event:

$(".selector").on( "panelcreate", 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: First, add jQuery Mobile to your project.

<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: The below example demonstrates the use of a panel create event. When the panel creates event ids fired an alert box appears saying “Panel create event 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= 
"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> 
</head> 
  
<body> 
  
    <div data-role="page"> 
        <div data-role="header"> 
            <h1 style="color:green;">GeeksforGeeks</h1> 
            <h3>jQuery Mobile Panel create 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> 
  
    <script> 
        // Initialize panel with create callback specified 
        $("#divID").panel({ 
            create: function (event, ui) { 
                // Open alert box when create event fires. 
                alert("Panel create event fired."); 
            } 
        }); 
    </script> 
</body> 
</html>