jQuery Mobile - Navbars with Button Elements

Description

Instead of using links inside the navbar, you can also use button elements.

Example

Following example demonstrates the use of navbar with button in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Navbars with button elements</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 = "navbar" data-iconpos = "left">
         <ul>
            <li><button data-icon = "star">Button One</button></li>
            <li><button data-icon = "arrow-l" data-theme = "b">Button Two</button></li>
            <li><button data-icon = "arrow-r">Button Three</button></li>
         </ul>
      </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_with_button.html file in your server root folder.

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

jquery_mobile_widgets.htm
Advertisements