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.
En este tutorial, vamos a aprender el evento de creación de jQuery Mobile Pagecontainer . El evento de creación en Pagecontainer se activa cuando se crea Pagecontainer. El evento de creación es una función de devolución de llamada donde podemos realizar las acciones requeridas cuando sea necesario. Tiene el evento y los parámetros ui , que se inicializan de la siguiente manera.
Sintaxis:
Inicialice el contenedor de páginas con la devolución de llamada de creación especificada:
$( "#page1" ).pagecontainer({
create: function( event, ui ) {
// Code
},
});
-
Vincula el evento pagecontainercreate a un detector de eventos:
$( "#page1" ).on( "pagecontainercreate", function( event, ui ) { // Code } );
Parámetros: Acepta una función de devolución de llamada que contiene dos parámetros.
- event : es un objeto de tipo evento que contiene los detalles del evento cuando se crea el Pagecontainer como la marca de tiempo y los valores inicializados del pagecontainer.
- ui : esto es nulo pero se usa para mantener la coherencia con los otros widgets en jQuery Mobile.
Enlaces CDN :
<enlace href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”hoja de estilo”/>
<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, mostramos un mensaje de alerta usando el evento de creación cuando se crea el Pagecontainer .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet"/>
<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="page1">
<div data-role="header">
<h1 style="color:green;">
GeeksforGeeks
</h1>
</div>
<div class="ui-content" role="main">
<center>
<h3>
jQuery Mobile Pagecontainer create event
</h3>
<a class="ui-btn ui-corner-all ui-btn-inline"
data-transition="slide" href="#page2">
Go To Page 2
</a>
</center>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1 style="color:green;">
GeeksforGeeks
</h1>
</div>
<div class="ui-content" role="main">
<center>
<h3>
jQuery Mobile Pagecontainer create Event
</h3>
<a class="ui-btn ui-corner-all ui-btn-inline" data-rel="back"
data-transition="slide" href="#page1">
Go Back To Page 1
</a>
</center>
</div>
</div>
<script>
$(document).ready(function(){
$( "#page1" ).pagecontainer({
create: function( event, ui ) {
alert("Page 1 has been created")
},
});
})
</script>
</body>
</html>
Producción:
jQuery Mobile Pagecontainer crear evento
Referencia: https://api.jquerymobile.com/pagecontainer/#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