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.
<!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:
Reference: https://api.jquerymobile.com/panel/#event-beforeopen