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:
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:
<!DOCTYPE html> <html> <head> <title>Jazz Calendar: Baker's Keyboard Lounge</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Baker's Keyboard Lounge</h1> </div> <div class="ui-content" role="main"> <address>2050 Livernois Ave <br>Detroit, Michigan 48221</address> <img src="https://maps.googleapis.com/maps/api/staticmap?center=2050%20Livernois%20Ave,%20Detroit,%20MI&zoom=14&size=288x200&markers=2050%20Livernois%20Ave,%20Detroit,%20MI&sensor=false" height="200" width="288" /> <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> </div> </div> </body> </html>
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.