jQuery Mobile: barras de herramientas dinámicas

Descripción

Puede inyectar barras de herramientas de forma dinámica con solo hacer clic en un botón. Debe actualizar la altura y el relleno de la página invocando la siguiente función.

$.mobile.resetActivePageHeight()

Ejemplo

El siguiente ejemplo demuestra el uso de barras de herramientas dinámicas en 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>

Salida

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

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

↰ Previous page