jQuery Mobile - Toolbar Theme

Description

  • The theme swatch will be inherited by the header and footer toolbar from the page by default; however, you can set the color of the theme swatch easily.

  • Whenever you use external fixed toolbars you must set a theme always, as there will not be any parent page from which the theme can be inherited.

Example

Following example demonstrates the use of toolbar theme in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Theme</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>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         
         <div data-role = "header" data-theme = "b">
            <h2>Header</h2>
         </div>
         
         <div data-role = "main" class = "ui-content">
            <h2>Page content</h2>
         </div>
         
         <div data-role = "footer" data-theme = "b">
            <h2>Footer</h2>
         </div>
      </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_theme.html file in your server root folder.

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

jquery_mobile_widgets.htm
Advertisements