The header of a jQuery Mobile page usually contains the text which is to be used as the page header. You can also add other content and markup to the header. This recipe shows you how to add an image to the header of your application.
Copy the full code of this recipe from the code/03/header-image sources folder. This code can be launched using the URL http://localhost:8080/03/header-image/main.html.
In this recipe, the image ABC.png is used as the logo image for a a fictitious company, ABC Inc.
- Create
main.htmland add the above image to its header. The image is linked to a dialog as shown in the following code:<div id="main" data-role="page" data-theme="a"> <div data-role="header" data-theme="a"> <h1>ABC Company</h1> <a href="#about" data-rel="dialog" data-theme="a" class="ui-btn ui-shadow ui-btn-up-a"> <img src="../../resources/images/ABC.png" width="24" height="24" alt="About ABC" /></a> </div> <div data-role="content"> This page has an Image in the Header </div> </div> - Add the
#aboutdialog as shown in the following code:<div id="about" data-role="page" > <div data-role="header" > <h1>About ABC</h1> </div> <div data-role="content"> <img src="../../resources/images/ABC.png" width="24" height="24" alt="ABC" style="margin-right:5px" />ABC Company Inc. </div> </div>
In main.html, create a #main page and add a header with <h1> text to it. Now add an anchor link in the header to open the #about page as a dialog by using the attribute data-rel="dialog". Specify a custom style to the anchor link using the attribute class="ui-btn ui-shadow ui-btn-up-a". Do not add data-role="button" as the framework would then enhance this link as a button. Next add an <img> element pointing to the ABC.png image as shown in the previous code. Scale this image to a suitable size by using the width and height attributes. Finally, define the #about page as given in the code. When you launch the application, the header of the #main page displays the ABC.png image on the left corner as shown in the following screenshot. Clicking on this image opens the #about dialog page.
You can also use native styling for the image and avoid any custom styles being set on the anchor element to display only the image. It is done by using the attribute data-role="none" as in the following code:
<a href="#about" data-role="none" data-rel="dialog" data-theme="a">
<img src="../../resources/images/ABC.png" widht="24" height="24"
alt="About ABC" />
</a>