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 PositionGive 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 ButtonsGive 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 OnlyGive 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 ControlGive 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.