jQuery Mobile - Toolbar Markup

Description

  • The toolbar markup contains toolbars like header that appears at the top and footer that appears at the bottom of the page.

  • The ui-title class will be added to the headings by framework.

  • To maintain visual consistency, every heading with ui-title class will be identically styled by default.

  • Both the header and footer is created using the data-role attribute.

Example

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

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Toolbar Markup</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 = "header">
         <h2>Header</h2>
      </div>
      <h2>This is content of the page.</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</p>
      
      <div data-role = "footer">
         <h2>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_markup.html file in your server root folder.

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

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements