Método jQuery Mobile Pagecontainer change()

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 change() de jQuery Mobile Pagecontainer. Este método se utiliza para cambiar de una página a otra página.

Sintaxis:

  • Para invocar el método de cambio:

    $( ".selector" ).pagecontainer( "change" );
  • Cambiar programáticamente de una página a otra.

    $( ":mobile-pagecontainer" )
    .pagecontainer( "change", "confirm.html", { role: "dialog" } );

Parámetro: Este método acepta los siguientes parámetros:

  • to: Este parámetro es la URL en forma de String a la que queremos navegar.
  • options: Este método acepta las siguientes opciones:
    • allowSamePageTransition: el valor predeterminado de este parámetro es falso. Ignora las requests para cambiar a la página actualmente activa. Si este valor se establece en verdadero, permite que se ejecute la solicitud.
    • changeHash: este parámetro es para crear una nueva entrada en el historial del navegador como parte de la secuencia de navegación.
    • data : Este parámetro es el dato a enviar con una solicitud de página Ajax.
    • dataUrl : este parámetro es la URL que se utiliza al actualizar la ubicación del navegador al finalizar el cambio().
    • loadMsgDelay : este parámetro es el número de milisegundos por los que se retrasa la aparición del mensaje de carga.
    • reloadPage : este parámetro se usa para forzar una recarga de la página incluso cuando ya está en el DOM. Este parámetro se usa solo cuando el argumento ‘url’ es una URL.
    • recargar : este parámetro se usa para forzar una recarga de la página incluso cuando ya está en el DOM. Este parámetro se usa solo cuando el argumento ‘url’ es una URL.
    • reverse : este parámetro es el valor de tipo booleano. Se utiliza para establecer si la transición se aplicará a la inversa.
    • rol : este parámetro es el valor del rol de datos que se usará al mostrar la página
    • showLoadMsg : este parámetro es el valor de tipo booleano. Se utiliza para configurar si se muestra un mensaje que indica que la página se está cargando.
    • transición : este parámetro es la transición que debe usarse para el cambio de página
    • type : este parámetro es el tipo de solicitud HTTP a usar («get», «post», etc.). Este parámetro se usa solo cuando el argumento «a» es una URL.

Tipo de retorno : el tipo de retorno de este método es un objeto.

Enlace CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts a 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 los usos del método change() de jQuery Mobile Pagecontainer.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1" />
    <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 change() 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>
        </div>
        <div data-role="page" id="GFG2">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Pagecontainer change() Method</h3>
            <div data-role="header">
                <h1>Second Page</h1>
            </div>
            <input type="button" id="Button"
                value="Change to First Page">
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#Button").on('click', function () {
                $(":mobile-pagecontainer")
                    .pagecontainer( "change", $("#GFG1" ));
            });
        });
    </script>
</body>
  
</html>

Producción:

jQuery Mobile Pagecontainer change() Method

Método jQuery Mobile Pagecontainer change()

Referencia: https://api.jquerymobile.com/pagecontainer/#method-change

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *