jQuery Mobile - Exercise

Contact Us or call 1-877-932-8228
jQuery Mobile - Exercise

jQuery Mobile

Duration: 25 to 35 minutes.

Build a two-page jQuery Mobile site. If possible, try testing the site from a mobile device or emulator.

  1. Open jqy-mobile-ui/Exercises/jquerymobile/index.html in a code editor.
  2. The needed CSS and JavaScript files been included for you.
  3. Add a page (a div with attribute data-role="page") for "Home" and a page for "Contact".
  4. For each page, add an appropriate header, content area, and footer, with some sample content.
  5. Add a navbar for each header, with appropriate links to each of the two pages; add classes to ensure the appropriate nav item shows as active on each page.
  6. Add a paragraph of class orientation at the bottom of each page's content area.
  7. At the bottom of the page, add an event handler: set the text of each .orientation paragraph to the appropriate value ("portrait" or "landscape"); note that the orientationchange event is called on page load, to set the text when the page first loads.
  8. The site should look like this (for the "Contact" page): jQuery Mobile exerise
  9. Optionally, visit the jQuery Mobile website to find other UI elements or events to test out.

Solution:

jqy-mobile-ui/Solutions/jquerymobile/index.html
<!DOCTYPE html> 
<html>
<head>
	<title>jQuery Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>

<!-- the home page: -->
<div data-role="page" id="home">

	<!-- home page header: -->
	<div data-role="header">
		<h1>Home</h1>
		<div data-role="navbar">
	        <ul>
	        	<!-- classes "ui-btn-active" and "ui-state-persist" -->
	        	<!-- make "Home" link active: -->
	            <li><a href="#home" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
	            <li><a href="#contact" data-icon="grid">Contact</a></li>
	        </ul>
	    </div>
	</div>

	<!-- home page content: -->
	<div data-role="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
		<p class="orientation"></p>
	</div>

	<!-- home page footer: -->
	<div data-role="footer">
		<h4><a href="mailto:info@example.com">info@example.com</a></h4>
	</div>
</div>

<!-- the contact page: -->
<div data-role="page" id="contact">

	<!-- contact page header: -->
	<div data-role="header">
		<h1>Contact</h1>
		<div data-role="navbar">
	        <ul>
	        	<!-- classes "ui-btn-active" and "ui-state-persist" -->
	        	<!-- make "Contact" link active: -->
	            <li><a href="#home" data-icon="home">Home</a></li>
	            <li><a href="#contact" class="ui-btn-active ui-state-persist" data-icon="grid">Contact</a></li>
	        </ul>
	    </div>
	</div>

	<!-- contact page content: -->
	<div data-role="content">
		<p>Cui tristique usitas. Bis ex populus typicus saepius populus olim exputo inhibeo fere haero. Sino transverbero olim abluo et mos nunc et nullus. Bis laoreet macto at ullamcorper eum.</p>
		<p class="orientation"></p>
	</div>

	<!-- contact page footer: -->
	<div data-role="footer">
		<h4><a href="mailto:info@example.com">info@example.com</a></h4>
	</div>
</div>
<script>
	//handler for orientation-change event:
	$(window).on('orientationchange', function(event) {
		//on orientation change, set content of div with appropriate text:
		$('.orientation').html('You are in <em>' + event.orientation + '</em> mode.');
	});
	//call event handler when page first loads, to set orientation message:
	$(window).orientationchange();
</script>
</body>
</html>

We mark up each page with <div data-role="page">; each page contains a div to represent the header, content area, and footer, with data-role attribute values of data-role, content, and footer, respectively. Each page div gets a unique id.

The navbar element goes in each header. Links point to the id of each page. We use classes ui-btn-active and ui-state-persist to ensure the correct links show as active for their respective pages.

An event handler at the bottom of the pages uses jQuery's html() method to set the inner text of all paragraphs of class orientation whenever the user changes the devices orientation.