Search within TutorialsPark

jQuery Mobile : Header


Learn how to use jQuery Mobile to create Headers for Navigation


jQuery Mobile: Header Bar

jQuery Mobile Header bars are used to display the title of the current page.You can add buttons for navigation or other controls to manage items within the page.

Header is defined using the attribute data-role with value set as header , a fixed header can be created by setting data-position="fixed"

In the demo below, a fullscreen page is created with the contents appearing edge-to-edge, a fullscreen is created by setting attribute data-fullscreen="true"

Example: jQuery Mobile - Header Position

Give it a TRY! » Note: The header shows the counter of our image deck


jQuery Mobile: Header Buttons

jQuery Mobile also allows you to add controls to the header inorder to manage screen contents, i.e save or cancel buttons.

The buttons can be of three types, a button with text content, button with icons, buttons with both buttons and icons.

Syntax: jQuery Mobile Header Buttons

Give it a TRY! » Note:An icon is attached to each button using the attribute data-icon


jQuery Mobile: Buttons with Icons Only

jQuery Mobile provides various types of icons which can be used to create buttons with icons only.The meaning of icons are fairly consistent across all devices.

To create an icon only button, two attributes are required data-icon and data-iconpos="notext"

Syntax: jQuery Mobile Buttons with Icons Only

Give it a TRY! » Note: The plus icon allows you to add an entry to the list.


jQuery Mobile: Header Bar with Segmented Control

jQuery Mobile can be used to create a segmented control which an set of inline controls.

Syntax: jQuery Mobile Header Bar with Segmented Control

Give it a TRY! » Note: The Button segments are aligned using CSS rules


jQuery Mobile: Back Buttons

jQuery Mobile can be used to create Back Button which allows you to navigate to the previous page, however there is a debate over adding back buttons or using the hardware back button.

To add a back button by setting the attribute data-auto-back-btn="true" on the page container.

Syntax: jQuery Mobile Back Button

Give it a TRY! » Note: If you enable back button globally, you can disable on specific pages by setting data-add-back-btn="false"