Category: Navigating with Headers, Toolbars, and Tab Bars

jQuery Mobile will truncate headers and footers with long titles (see Figure 3–6). When the text is too long jQuery Mobile will truncate the text and add an ellipsis to the end. If you encounter this situation and want to show the complete text (see Figure 3–7) you can adjust the CSS selector to remedy the issue…

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…

jQuery Mobile includes several standard icons (see Table 4-1) that you may use to create icon-only buttons. For instance, the “info” icon is commonly used with a “flip” transition to display configuration options or more information. The use of standard icons consumes very little real estate and their meaning is relatively consistent across all devices. For instance, if we wanted…

In Figure 3–3, we have a header with a “Cancel” and a “Done” button to help manage the entry of a movie review. As shown in Listing 3–2, the button is styled as an ordinary link. We also attached an icon to each button with the data-icon attribute. To create a text-only button simply remove the data-icon attribute. Within a header,…

There are situations when you will need to add controls to the header to help manage the screen contents. For example, save and cancel buttons are common controls that are available when editing data. There are three styles of buttons you may add to a header. They include:

The basic usage of a header is to simply display the title of the active page. A header in its simplest form is shown below. <div data-role=”header”>  <h1>Header Title</h1></div> Header Positioning There are three styles available for positioning the header. They include: NOTE: In order to achieve true fixed toolbars, a browser needs to either support position:fixed or…

There are a few points of importance about the header. They include: TIP: You may also use the header as a segmented control as shown in Figure 3–5. A segmented control allows the user to display different views of related data.

The header bar displays the title of the current screen. Additionally, you can add buttons for navigation or add controls that manage items in the page. Although the header is optional, it is commonly used to provide a title for the active page. Let’s begin by reviewing the header structure and look at how we…