A First Example
Let's look at a simple jQuery Mobile-based demonstration: we'll rig up a low-fi page from which users can filter and select from a few jazz clubs, as shown on the left. Tapping the club brings the user to a detail page, with map, as shown on the right:
Open the file jQueryMobile/Demos/jazz/index.html in your browser (preferably from a smartphone) and in your file editor.
Three divs wrap our content:
- <div data-role="page"> is the outermost wrapper;
- <div data-role="header"> wraps the header of the page;
- <div class="ui-content" role="main"> wraps the main content for the page.
The form and unordered list markup in index.html enables the filter-as-you-type functionality, limiting the results shown to those items whose display text matches the typed text. Each individual list item is a link to a club-specific detail page.
Tapping the link to any of the detail pages shows the title of the page, the venue's address, a map of the location, and a link ("Home") back to the main page. Let's take a look at code from one of those pages:
Again, divs denoting the "page", "header", and "content", respectively, mark up our content. We exploit the convenient Google Maps static-map-from-address image: supplying GET parameters for the center of the map and the marker to show allows us to easily render a useful map of the location. Setting class="ui-btn ui-icon-home ui-btn-icon-left" for the link back to the "Home" page displays the bottom link as a mobile-friendly button (from class ui-btn); the latter two classes sets the icon for the button as jQuery Mobile's canned "home" icon.