{"id":30,"date":"2023-08-25T17:32:31","date_gmt":"2023-08-25T17:32:31","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=30"},"modified":"2023-08-25T17:32:31","modified_gmt":"2023-08-25T17:32:31","slug":"header","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/header\/","title":{"rendered":"Header Widget"},"content":{"rendered":"

\nHeader Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a header widget<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>

Options<\/h3><\/div>\n

Methods<\/h3><\/div>\n

Events<\/h3><\/div><\/section>
\n\t\t

The Header bar serves as the page title, is usually the first element inside each mobile page, and typically contains a page title and up to two buttons.<\/p>\n\t\t

Header structure<\/h3>\n\t\t

The header<\/code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the left and\/or right of the title for navigation or actions. Headers can optionally be positioned as fixed so they remain at the top of the screen at all times instead of scrolling with the page.<\/p>\n\t\t

The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile "pages" may use a H1 element on the home "page" and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.<\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<div<\/span> data-role<\/span>="header"<\/span>><\/span><\/code><\/div><\/div>
  <h1<\/span>><\/span> Page Title <\/h1<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
Default header features<\/h3>\n\n\t\t
The header<\/code> toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.\n\t\t