Dynamic Toolbars

Description

You can inject toolbars dynamically onclick of a button. You need to update the page height and padding by invoking below function:

$.mobile.resetActivePageHeight()

Example

The below example demonstrates the use of dynamic toolbars 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="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="http://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>

Output

Let's carry out the following steps to see how above code works:

Save above html code as toolbar_widget_dynamic.html file in your server root folder.
Open this HTML file as http://localhost/toolbar_widget_dynamic.html and output as below gets displayed.