External Fixed Toolbars

Description

The header and footer can be made external by placing them outside the page and the position of the toolbars position can also be fixed.

Example

Following example demonstrates the use of external fixed 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();
         });
      </script>
   </head>
   
   <body>
      <div data-role = "header" data-position = "fixed" data-theme = "a">
         <h1>External fixed header</h1>
      </div>
      
      <div data-role = "page">
         <h2>Most widely spoken languages</h2>
         <ul>
            <li><p>Mandarin(Standard Chinese)</p></li>
            <li><p>Spanish</p></li>
            <li><p>English</p></li>
            <li><p>Hindi</p></li>
            <li><p>Arabic</p></li>
            <li><p>Portuguese</p></li>
            <li><p>Bengali</p></li>
            <li><p>Russian</p></li>
            <li><p>Japanese</p></li>
            <li><p>Punjabi</p></li>
            <li><p>German</p></li>
            <li><p>Javanese</p></li>
            <li><p>Wu (Shanghainese)</p></li>
            <li><p>Malay/Indonesian</p></li>
            <li><p>Telugu</p></li>
            <li><p>Vietnamese</p></li>
            <li><p>Korean</p></li>
            <li><p>French</p></li>
            <li><p>Marathi</p></li>
            <li><p>Tamil</p></li>
            <li><p>Urdu</p></li>
            <li><p>Turkish</p></li>
            <li><p>Italian</p></li>
            <li><p>Yue (Cantonese)</p></li>
            <li><p>Thai</p></li>
            <li><p>Gujarati</p></li>
            <li><p>Jin</p></li>
            <li><p>Southern</p></li>
            <li><p>Persian</p></li>
            <li><p>Polish</p></li>
            <li><p>Pashto</p></li>
            <li><p>Kannada</p></li>
            <li><p>Xiang (Hunnanese)</p></li>
            <li><p>Malayalam</p></li>
            <li><p>Sundanese</p></li>
            <li><p>Hausa</p></li>
            <li><p>Odia (Oriya)</p></li>
            <li><p>Burmese</p></li>
            <li><p>Hakka</p></li>
            <li><p>Ukrainian</p></li>
         </ul>
      </div>
         
      <div data-role = "footer" data-position = "fixed" data-theme = "a">
         <h1>External fixed footer</h1>
      </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_fixed.html file in your server root folder.
Open this HTML file as http://localhost/toolbar_external_fixed.html and the following output will be displayed.

jquery_mobile_widgets.htm