Tab between views in the application using a TabStrip widget

The TabStrip widget is used to navigate between various views in the application. TabStrip is usually placed in the footer of the layout, and on clicking the buttons present in TabStrip, the corresponding view is shown.

How to do it…

Let's create a layout that contains a TabStrip widget in the footer:

<div
  data-role="layout"
  data-id="defaultLayout">

  <footer data-role="footer">

    <div data-role="tabstrip">

      <a href="#contactsView" 
      data-icon="about">
        Contacts
     </a>

     <a 
       href="#favoritesView"
       data-icon="favorites">
       Favorites
     </a>

     <a 
       href="#settingsView" 
       data-icon="settings">
       Settings
     </a>

    </div>
  
  </footer>
</div>

In the preceding code snippet, the TabStrip widget (data-role='tabstrip') contains three buttons: Contacts, Favorites, and Settings. Each of these...