jQuery Mobile - External Toolbars

Description

The header and footer will be placed outside the page.

These toolbars are positioned before and after the page inside the body and they will remain in dom unless removed manually.

Since the toolbars are outside the page they will not be auto initialized. You have to call the toolbar plugin by invoking the following function.

$(function() {
   $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});

As the toolbars are placed outside the page they will not inherit a theme from the page instead you have to set a theme for them always.

The data-theme attribute can be used for this or set theme options whenever you call the plugin by invoking the following function.

$(function() {
   $( "[data-role='header']" ).toolbar({ theme: "a" });
});

Example

Following example demonstrates the use of external toolbars in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar External 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>
         $(function() {
            $( "[data-role = 'header'], [data-role = 'footer']" ).toolbar({ theme: "a" });
         }); 
      </script>
   </head>
   
   <body>
      <div data-role = "header">
         <h2>External Header</h2>
      </div>
      
      <div data-role = "page">
         <h2>Page's 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>
      
      <div data-role = "footer">
         <h2>External Footer</h2>
      </div>
   </body>
</html>

Output

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

  • Save the above html code as toolbar_external.html file in your server root folder.

  • Open this HTML file as http://localhost/toolbar_external.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements