We need to get you creating. Working through the examples in the lessons and on jquerymobile.com are important, but you need to dive in and get your hands dirty. To that end, you’re going to create a simple app for yourself.

Test App

This won’t be anything fancy. In fact, it will be quite crude. It will be more work than necessary, but you have to do that in order to get the language down.

Parameters

Use your GIIP general proposal outline as text for this assignment. You’re going to create a “Project Proposal App”.

  • Make a ‘page’ for each section of the proposal, i.e. Methodology, Goals, etc.
  • At the bottom of each ‘page’ include a link to the previous page and the next page. You can use <div data-role=”footer”> if you like.
  • Make sure that all the links work
  • Don’t include the internal links from Project 1. They won’t work.

Doing This Project

This should be easy as long as you remember what you learned in Lesson 2. You can find the basic app template on this page of jQuery Mobile. You can also copy if from here


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Start of first page --&gt;
&lt;div data-role="page" id="foo"&gt;

&lt;div data-role="header"&gt;
&lt;h1&gt;Header&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role="content"&gt;
&lt;p&gt;I'm first in the source order so I'm shown as the page.&lt;/p&gt;
&lt;p&gt;View internal page called &lt;a href="#bar"&gt;bar&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role="footer"&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;

&lt;!-- Start of second page --&gt;
&lt;div data-role="page" id="bar"&gt;

&lt;div data-role="header"&gt;
&lt;h1&gt;Bar&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;

&lt;div data-role="content"&gt;
&lt;p&gt;I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.&lt;/p&gt;
&lt;p&gt;&lt;a href="#foo"&gt;Back to foo&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;

&lt;div data-role="footer"&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;

&lt;/html&gt;

You can get rid of the footers if you want. It’s purely an aesthetic choice. When you want to create a new page, just create another <div data-role=”page” id=”page-x”>…</div> and put in your content.

Put It Online

You have access to a web server, so make use of it. You can upload the html file you create to your server. Just put it into a folder called “my-app” or something. This way you can try it out on your phone!

For an example, check out this.