Building Your First jQuery Mobile Page - Exercise

Contact Us or call 1-877-932-8228
Building Your First jQuery Mobile Page - Exercise

Building Your First jQuery Mobile Page

Duration: 10 to 20 minutes.

In this exercise, you will build a simple page using the Rapid Interface Builder.

  1. Visit the Rapid Interface Builder from a Chrome browser;
  2. When prompted, click OK to allow 01.org to "store large data on your computer" - the prototyping tool uses local storage to save your work on your browser;
  3. Edit the "Header" and "Footer" titles (by double-clicking on them) to present appropriate content - we used "Webucator" as the header and "jQuery Mobile" as the footer;
  4. Drag a button to the center pane of the layout window - link the button to http://api.jquerymobile.com/ and change the title of the button to "jQuery Mobile Docs";
  5. Optionally, change the "theme" property of any element (or all elements) to see how using the stock jQuery Mobile themes - lettered from "a" to "e" - to change the appearance of your page; we used the "e" theme;
  6. When you are satisfied with your page, click Preview at upper left to view your design - you can switch between "Layout" and "Preview" mode to make and view changes;
  7. Click Code at upper left to view the code that rendered your final design.
  8. Click Export at upper right to export (choose "zip" format) a copy of the finished project; if possible, save the project files to a web-accessible server and view on a smartphone to test it out with an actual mobile device;
  9. Open the file in an editor to check the code.
  10. The page should look something like this when viewed on a smartphone: UI Builder solution

Solution:

WhatIsjQueryMobile/Solutions/index.html
<!DOCTYPE html>
<html>
    
    <head>
        <title>title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="lib/jquery-1.6.4.js"></script>
        <script src="lib/jquery.mobile-1.1.0.js"></script>
        <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
        <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
    </head>
    
    <body>
        <div data-role="page" id="page1">
            <div data-role="header" data-theme="e">
                <h1>Webucator</h1>
            </div>
            <div class="ui-content" role="main">
                <a data-role="button" href="http://api.jquerymobile.com/" data-rel="page" data-theme="e">jQuery Mobile Docs</a>
            </div>
            <div data-role="footer" data-theme="e">
                <h1>jQuery Mobile</h1>
            </div>
        </div>
    </body>

</html>

We didn't have to write any code here - the Rapid Interface Builder prototyping tool generated all of the code for us.

As you dig through the code from our solution, note that we used theme "e" for all elements, giving the header, footer, and button a yellow color scheme - we'll dig deeper into themes later in this course.

Note, too, that the Rapid Interface Builder gathers together all of the files we need for our mobile-optimized page into directories: source for the jQuery and jQuery Mobile libraries, etc.

Last, note that the version of jQuery Mobile used by the Rapid Interface Builder tool is a bit outdated. While the tool is a nice way to start playing with jQuery Mobile in a visual way, we won't be using it going forward: we'll code pages by hand from here on out.

Next