jQuery and JavaScript Phrasebook

Creating a Mobile Web Page

Click here to view code image

<div data-role="page">   <div data-role="header"><h1>Header</h1></div>   <div data-role="content" id="content">     <p>Images</p>     <img src="../images/flower.jpg" />   </div>   <div data-role="footer"><h4>Footer</h4></div> </div>

Mobile pages are composed of three main parts: the header, the footer, and content between them. All three are not necessarily required, but it is a good idea to at least have a header with the content, especially when working with multiple pages.

All these elements are defined by adding data-role attributes to <div> elements. The content inside the <div> elements can be just about anything, including text, images, forms, and lists.

The following code shows ...