jQuery Mobile - Barre degli strumenti dinamiche

Descrizione

Puoi inserire barre degli strumenti dinamicamente con un clic di un pulsante. È necessario aggiornare l'altezza e il riempimento della pagina richiamando la seguente funzione.

$.mobile.resetActivePageHeight()

Esempio

L'esempio seguente mostra l'uso delle barre degli strumenti dinamiche in jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Dynamic Toolbars</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( "click", "#inject-toolbars", function() {
            $( "<div data-role = 'header'><h2>Dynamic Header</h2></div>")
               .prependTo( "#page-with-dynamic-toolbars" )
               .toolbar({ position: "fixed" });
     
            $( "<div data-role = 'footer'><h2>Dynamic Footer</h2></div>")
                .appendTo( "#page-with-dynamic-toolbars" )
                .toolbar({ position: "fixed" });
     
            $.mobile.resetActivePageHeight();
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" class = "jqm-demos" id = "page-with-dynamic-toolbars" 
         data-url = "page-with-dynamic-toolbars">
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h2>Page content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
            velit esse cillum dolore eu fugiat nulla pariatur.</p>
            
            <div data-demo-html = "#page-with-dynamic-toolbars" data-demo-js = "true">
               <button id = "inject-toolbars" class = "ui-btn ui-btn-inline 
               ui-corner-all">Inject toolbars</button>
            </div>
         </div>
      </div>
   </body>
</html>

Produzione

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

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

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