jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, utilizaremos el método load() de jQuery Mobile Pagecontainer para cargar la página desde la URL especificada.
Sintaxis:
Invocando el método de carga:
$(".selector").pagecontainer("load");
Cargar una página externa, mejorar su contenido e insertarla en el DOM:
$(":mobile-pagecontainer").pagecontainer(
"load", "confirm.html", {
role: "dialog"
}
);
Parámetros: Este método acepta dos parámetros que se ilustran a continuación:
- url: este parámetro es la URL desde la que cargar la página. Puede ser una URL absoluta o relativa (p. ej., “acerca de/nosotros.html”).
- opciones: este parámetro es un hash que contiene opciones que afectan el comportamiento del método.
- type: Su valor por defecto es “get”. El tipo de solicitud HTTP a utilizar es «obtener», «publicar», etc.
- data: Su valor por defecto es indefinido. Son los datos para enviar con una solicitud de página Ajax.
- reloadPage: Dice si forzar una recarga de la página incluso cuando ya está en el DOM. Esto se usa solo cuando el argumento ‘url’ es una URL. Su valor por defecto es false y es de tipo booleano. Esta propiedad está obsoleta a partir de jQuery Mobile 1.4.0 y se eliminará en 1.5.0. Utilice la recarga de propiedades en su lugar.
- recargar: Esto dice si forzar una recarga de la página incluso cuando ya está en el DOM. Esto se usa solo cuando el argumento ‘url’ es una URL. Es de tipo booleano y su valor por defecto es false.
- rol: este es el valor del rol de datos que se usará al mostrar la página. Su valor por defecto es indefinido.
- showLoadMsg: Dice si mostrar un mensaje indicando que la página se está cargando. Es de tipo booleano y su valor por defecto es true.
- loadMsgDelay: Esto dice la cantidad de milisegundos por los cuales retrasar la aparición del mensaje de carga. Si la carga se completa dentro de este tiempo, no se muestra ningún mensaje de carga. Su valor por defecto es 50.
Valores devueltos: este método no devuelve ningún valor.
Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src= ”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile -1.5.0-alpha.1.min.js”></secuencia de comandos>
Ejemplo: Este ejemplo describe el método load() de jQuery Mobile Pagecontainer .
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"/>
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
</head>
<body>
<center>
<div data-role="page" id="GFG1">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Pagecontainer
load() Method
</h3>
<div data-role="header">
<h1>First Page</h1>
</div>
<div role="main">
<a href="#GFG2" data-transition="slide">
Go To Second Page
</a>
</div>
<input type="button" id="Button"
value="Invoke the load() Method">
<div id="log"></div>
</div>
<div data-role="page" id="GFG2">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Pagecontainer
load() Method
</h3>
<div data-role="header">
<h1>Second Page</h1>
</div>
<div role="main">
<a href="#GFG1" data-rel="back"
data-transition="slide">
Go Back To First Page
</a>
</div>
<input type="button" id="Button"
value="Invoke the load() Method">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
$("#GFG2").pagecontainer("load");
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/pagecontainer/#method-load
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA