jQuery Mobile - Navbars Themes

Description

Just like buttons, the theme swatch will be inherited by the navbars from their parent container.

Whenever the navbar is positioned in the header or footer toolbar, the default toolbar swatch a will be inherited unless it is set in the markup.

You can add swatch classes to apply the body swatch (ui-body-a and ui-body-b). You can also use data-theme attribute to set the theme color for individual navbar items and specify a theme swatch.

The class ui-body adds the standard body padding.

Example

Following example demonstrates the use of navbar themes in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Navbars Themes</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 class = "ui-body-a ui-body">
         <h3>Swatch "a"</h3>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "star">A</a></li>
               <li><a href = "#" data-icon = "gear">B</a></li>
               <li><a href = "#" data-icon = "grid">C</a></li>
               <li><a href = "#" data-icon = "arrow-l">D</a></li>
               <li><a href = "#" data-icon = "arrow-r">E</a></li>
            </ul>
         </div>
      </div>
      
      <div class = "ui-body-b ui-body">
         <h3>Swatch "b"</h3>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "star">A</a></li>
               <li><a href = "#" data-icon = "gear">B</a></li>
               <li><a href = "#" data-icon = "grid">C</a></li>
               <li><a href = "#" data-icon = "arrow-l">D</a></li>
               <li><a href = "#" data-icon = "arrow-r">E</a></li>
            </ul>
         </div>
      </div>

      <h3><i>data-theme</i> attribute</h3>
      <div data-role  =  "footer">
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "grid" data-theme = "a">A</a></li>
               <li><a href = "#" data-icon = "grid" data-theme = "b">B</a></li>
            </ul>
         </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 navbar_themes.html file in your server root folder.
Open this HTML file as http://localhost/navbar_themes.html and the following output will be displayed.

jquery_mobile_widgets.htm