jQuery Mobile es una tecnología basada en la web diseñada para crear aplicaciones y sitios web receptivos a los que se pueda acceder en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio. DialogWidget se usa como una ventana emergente y se puede usar en cualquier página para convertirla en un cuadro de diálogo modal.
En este artículo, vamos a aprender el evento de creación de diálogo de jQuery Mobile . El evento de creación se activa cuando se crea el widget de diálogo. La función de devolución de llamada del diálogo se llama cuando se crea el diálogo.
Sintaxis :
La función de devolución de llamada para el evento de creación se proporciona a continuación:
$("Selector").dialog({
create: function( event, ui ) {}
});
Valores paramétricos:
- event : este evento se activará cuando se cree el cuadro de diálogo.
- ui : especifica el objeto vacío, aunque se incluye por coherencia con otros widgets.
Para vincular el detector de eventos al evento dialogcreate :
$("Selector").on("dialogcreate", function(event, ui ) {});
Enlaces CDN : Los siguientes son enlaces CDN para el proyecto jQuery Mobile.
<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-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Ejemplo : en el siguiente ejemplo, cada vez que se carga la página, se crea el cuadro de diálogo y se muestra un mensaje de alerta.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<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-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role="page" id="gfgpage">
<div data-role="header">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div data-role="main" class="ui-content">
<h3>jQuery Mobile Dialog create Event</h3>
<center>
<a href="#gfgDialog" data-rel="dialog">
GeeksforGeeks dialog
</a>
</center>
</div>
</div>
<div data-role="page" id="gfgDialog">
<div data-role="header">
<h2>GeeksforGeeks</h2>
</div>
<div role="main" class="ui-content">
<p>Programming Tutorials Website</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Web Development</li>
</ul>
</div>
</div>
<script>
$("#gfgDialog").dialog({
create: function(event, ui) {
alert("Welcome to GeeksforGeeks")
}
});
</script>
</body>
</html>
Producción:
Referencia : https://api.jquerymobile.com/dialog/#event-create
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA