jQuery Mobile Page crear evento

jQuery Mobile es una biblioteca de JavaScript construida sobre jQuery . Se utiliza para crear sitios web receptivos y accesibles para una variedad de dispositivos como teléfonos inteligentes, tabletas y computadoras de escritorio.

En este artículo, utilizaremos la creación de páginas de jQuery Mobileevento que se desenstring después de que se haya creado la página. Es el mejor evento si desea agregar dinámicamente contenido a su página y dejar que jQuery Mobile lo diseñe por usted.

Sintaxis:

  • Inicialice la página con la devolución de llamada de creación especificada.

    $(".selector").page({
      create: function( event, ui ) {
          // Your code here.
      }
    });
  •  

  • Enlace el evento pagecreate a un detector de eventos.

    $( ".selector" ).on( "pagecreate", function( event, ui ) {} );

Parámetros: Acepta una función de devolución de llamada que tiene 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.

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: El siguiente ejemplo demuestra el uso del evento de creación de página. Vinculamos un detector de eventos al evento pagecreate que abre un cuadro de alerta cuando se activa el evento.

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).on("pagecreate", function (event, ui) {
            alert("Pagecreate event triggered.");
        });
    </script>
</head>
  
<body>
  
    <div id="#page1" data-role="page">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>jQuery Mobile Page create event</h3>
        </div>
        <div role="main" class="ui-content">
            <center>
                <h2>What is GeekforGeeks?</h2>
                <p style="padding: 0px 20px">
                    GeeksforGeeks is a computer science 
                    portal for geeks by geeks. Here
                    you can find articles on various 
                    computer science topics like Data
                    Structures, Algorithms and many 
                    more. GeeksforGeeks also provide 
                    courses, you can find the courses at
                    <a href="https://practice.geeksforgeeks.org/courses">
                      https://practice.geeksforgeeks.org/courses
                    </a>
                </p>
  
                <p class="do-not-toggle-on-tap">
                    For cracking interviews of top 
                    product based companies, you need to
                    have good and deep undestanding of 
                    topics like DSA, System design etc.
                    GeeksforGeeks provide you quality 
                    content so that you can prepare for
                    the interviews. GeeksforGeeks also 
                    have a practice portal where you
                    can practice problems and brush 
                    on your skills. You can visit the
                    practice portal at
                    <a href="https://practice.geeksforgeeks.org">
                      https://practice.geeksforgeeks.org</a>
                </p>
  
            </center>
        </div>
    </div>
</body>
</html>

Producción:

jQuery Mobile Page create Event

Referencia: https://api.jquerymobile.com/page/#event-create

Publicación traducida automáticamente

Artículo escrito por vpsop 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 *