jQuery Mobile: eventos de transición de página

Descripción

Se activa cuando pasamos de una página a otra utilizando los siguientes tipos de eventos:

El evento pagebeforeshow se activa cuando se activa en "toPage" antes de que comience la animación de transición.
El evento de presentación de páginas se activa cuando se activa en "toPage" después de que se produce la animación de transición.
El evento pagebeforehide se activa cuando se activa en "fromPage" antes de que comience la animación de transición.
El evento pagehide se activa cuando se activa en "fromPage" después de que se produce la animación de transición.

Ejemplo

El siguiente ejemplo describe el uso de eventos de transición de página en jQuery Mobile Framework.

<!DOCTYPE html>
   <head>
      <title>Page Transition Events</title>
      <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-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script>
         $(document).on("pagebeforeshow","#page2",function() {
            alert("The pagebeforeshow event has been fired and second page is yet to be shown.");
         });
         
         $(document).on("pageshow","#page2",function() {
            alert("The pageshow event has been fired and second page is displaying now.");
         });
         
         $(document).on("pagebeforehide","#page2",function() {
            alert("The pagebeforehide event has been fired and second page is going to be hide now.");
         });
         
         $(document).on("pagehide","#page2",function() {
            alert("The pagehide event has been fired and second page is hidden now.");
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>This is first page</p>
            <a href = "#page2">Page Two</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>

      <div data-role = "page" id = "page2">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>This is second page</p>
            <a href = "#page1">Page One</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_page_transition_event.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_page_transition_events.html y se mostrará el siguiente resultado.

↰ Previous page