jQuery Mobile es una biblioteca de JavaScript construida sobre jQuery. Se utiliza para crear sitios web o aplicaciones web rápidos y receptivos a los que se puede acceder en una variedad de dispositivos como dispositivos móviles, tabletas y computadoras de escritorio.
En este artículo, utilizaremos el evento de apertura de jQuery Mobile Panel que se activa después de que el panel se haya abierto por completo.
Parámetros de devolución de llamada: la función de devolución de llamada acepta un parámetro de evento de tipo evento y un objeto de interfaz de usuario . El objeto de la interfaz de usuario está vacío, se incluye solo por coherencia con otros eventos en la biblioteca de jQuery Mobile.
Sintaxis:
-
Inicialice el panel con la devolución de llamada abierta especificada:
$(".selector").panel({ open: function( event, ui ) { // Your code here } }); -
Vincule el evento panelopen a un detector de eventos:
$(".selector").on( "panelopen", function( event, ui ) {} );
Parámetros: Acepta una función de devolución de llamada que contiene dos parámetros.
- evento: Acepta valor de tipo evento.
- ui: acepta el valor del tipo de objeto. El objeto ui puede estar vacío pero se puede usar para mantener la coherencia con otros eventos.
Enlaces CDN:
<enlace rel=”hoja de estilo” 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>
Ejemplo: En el siguiente ejemplo, se abre un cuadro de alerta cuando se activa el evento de apertura del panel .
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>
<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>
Producción:
Referencia: https://api.jquerymobile.com/panel/#event-open