jQuery Mobile - Finestre di dialogo delle transizioni

Descrizione

Il plugin di transizione fornisce un semplice effetto di transizione. L' attributo di transizione dei dati viene utilizzato per applicare una transizione diversa nella finestra di dialogo come da scelta.

Esempio

Il seguente esempio dimostra l'uso della transizione in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

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

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline" 
               data-transition = "slidedown">SlideDown Dialog</a>
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline"
               data-transition = "flip">Flip Dialog</a>
         </div>

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

      <div data-role = "page" data-dialog = "true" data-close-btn = "right" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
      
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
      
      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come transition.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/transition.html e verrà visualizzato il seguente output.