drew.d.lenhart

programming, software, technology, anything on my mind...

Developing a HTML5 App in jQuery Mobile Part 1

2014/08/03

In this tutorial, I will cover the basics of creating a simple jQuery Mobile app.  The app we will be creating is a BMI calculator (Body Mass Index).  This app will select either the metric or standard system in order to calculate the BMI, and output the information.  Take a look at what we will be making:

View Demo

Lets begin to make the shell of the app.  First begin by downloading the latest jQuery Mobile javascript library.

Create a file called index.html, external.css, and main.js.  A folder CSS , javascript, and images.  Your structure should looks like this:

structure

Place all of the .js jQuery files inside the javascript folder and the same for the css files.  You don't have to follow this structure.  I think its good practice to keep things organized.

Lets get our basic page set up.  The code below shows our jQuery and css files in the header:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>snowyBMI</title>
<link href="css/external.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>

<a href="http://javascript/jquery-1.8.2.min.js">http://javascript/jquery-1.8.2.min.js</a>
<a href="http://javascript/jquery.mobile-1.2.0.min.js">http://javascript/jquery.mobile-1.2.0.min.js</a>
<a href="http://javascript/main.js">http://javascript/main.js</a>

</head>
<body>

</body>
</html>

 

Now lets create some pages.  Whats nice about jQuery Mobile is instead of using a bunch of .html pages, we can keep our pages within tags by calling "data-role = "page".  The framework will pick up on this tag and think of it as a separate page.  I am not going into too much detail on jQuery Mobile, the documentation on their website explains the flow very well. The basic set up of a page is quite simple.  Create a div using the "data-role="page".  This creates the page.  Inside the page div you can add a header div or a footer div.  I would also insert a div to hold the content using "data-role="container". Buttons are quite simple as well.  Simply call:

<a href="#poper">Information</a>

data-role "button" creates visual button, and when you link to another page, use #page name (generally is the ID of the data-role="page" you created.) Inside each div you can call a theme:  "data-theme="a"".  jQuery Mobile has 5 basic themes,  a, b, c, d, e.  If you want to customize your own, their website has a nice gui editor for creating your own themes! Look and review the code below for basic functionality.

Basic shell demo



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>snowyBMI</title>
<link href="css/external.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>

<script src="javascript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="javascript/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="javascript/main.js" type="text/javascript"></script>

</head>
<body>

<div data-role="page" id="page" class = "mainPage" data-theme="a">

   <div data-role="content">
        <center><h1>Another BMI Calculator</h1></center>

      <a href="#bmi" data-role="button" data-theme="a">BMI Calculator</a>

      <a href="#poper" data-role="button" data-theme="a">Information</a>

      <a href="#about" data-role="button" data-theme="a">About</a>
      <br />

   </div>

</div>

<!--BMI Calc----------------------------------------------------- -->

<div data-role="page" id="bmi" data-add-back-btn="true" data-theme="a">
    <div data-role="header" data-theme="a">
        <h1>BMI Calculator</h1>

    </div>
    <div data-role="content">
        some content
    </div>

</div>

<!--Information page.----------------------------------------------------- -->

<div data-role="page" id="poper" data-add-back-btn="true" data-theme="a">
    <div data-role="header" data-theme="a">
        <h1>Information</h1>
    </div>
    <div data-role="content">
        some content here!
    </div>

</div>

<!--About Popup dialog-->
<div id="about" data-role="dialog" data-title="About" data-theme="b">
        <div data-role="header" data-theme="a">

        <h1>About</h1>

        </div>
        <div data-role="content">
          woohoo a popup!
    </div>

</div>

</body>
</html>

Next tutorial:  Part 2 * * * * * -Originally published on snowytech.com - 10/31/2012