Header bar with a segmented control

A segmented control is an inline set of controls that each display a different view. For example, the segmented control in Figure 3–5 shows movies by a specific category. This segmented control allows users to quickly view movies by the category of their choice: In Theatres, Coming Soon, or Top Rated.

Figure 3–5. Segmented Control

It is recommended to position the segmented control within the main header as shown in Listing 3–4. This positioning allows the segmented control to integrate seamlessly with the main header if you choose to position the header as a fixed control. With the addition of a few minor styling updates we now have a segmented control that will allow users to quickly view data in alternate views!

Listing 3–4. Segmented Control (ch3/header-segmented-control.html)<div data-role="header" data-theme="b" data-position="fixed">
  <h1>Movies</h1>
  <div class="segmented-control ui-bar-d">
    <div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button" class="ui-control-active">
         In Theatres
      </a>
      <a href="#" data-role="button" class="ui-control-inactive">
        Coming Soon
      </a>
      <a href="#" data-role="button" class="ui-control-inactive">
        Top Rated
      </a>
    </div>
  </div>
</div>


<style>
  .segmented-control { text-align:center;}
  .segmented-control .ui-controlgroup { margin: 0.2em; }
  .ui-control-active, .ui-control-inactive {
      border-style: solid; border-color: gray; }
  .ui-control-active { background: #BBB; }
  .ui-control-inactive { background: #DDD; }
</style>