jQuery Mobile es una biblioteca de JavaScript que se utiliza para crear aplicaciones web receptivas y accesibles para dispositivos móviles, pestañas, escritorios, etc. En este artículo, usaremos el evento de cierre del panel de jQuery Mobile que se activa después de que el panel se haya cerrado por completo.
Sintaxis:
-
Inicialice el panel con la devolución de llamada de cierre especificada:
$( ".selector" ).panel({ close: function( event, ui ) { // Your code here } }); -
Vincule el evento panelclose a un detector de eventos:
$( ".selector" ).on( "panelclose", 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 en jQuery Mobile.
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, cambiamos el texto del párrafo con id «escribir» cuando se activa el evento de cierre 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({
close: function (event, ui) {
$("#write").text("Panel close event fired.")
}
});
});
function closePanel(){
$("#divID").panel("close");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" >
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery Mobile Panel close event</h3>
</div>
<div role="main" class="ui-content">
<center>
<a href="#divID">Open Panel</a>
<p style="background-color:green;
color:white;" id="write">
</p>
</center>
</div>>
<div data-role="panel" id="divID">
<button onclick="closePanel();">
Close Panel
</button>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/panel/#event-close