Create your first jQuery Mobile “App”

Let’s setup our first jQuery Mobile site/app (whatever you want to call it). This tutorial just covers basic setup and a first page. No links or buttons, we’ll cover that soon. But it’s a lot more straightforward than you might think. You need three things:

  1. jQuery Mobile CSS (default theme, or roll your own at jquerymobile.com)
  2. jQuery.js (download from jquery.com)
  3. jQuery-mobile.js (download from jquerymobile.com)

Let’s create our basic html structure:

<!DOCTYPE html>
<html>
<head>
 <title>My First jQuery Mobile "App"</title>
 <link rel="stylesheet" href="jquery.mobile-1.0.css"/>
 <script src="jquery.js"></script>
 <script src="jquery.mobile-1.0.js"></script>
</head>
<body>
 …
</body>
</html>

Next we’ll create our first “page”. Note that we’ll be using HTML5 markup. Put the following inside the body tag:

<section id="page1">
<header><h1>This is my first page!</h1></header>
  <div class="main">
   And here's my content!
  </div>
<footer><h1>And here's my footer</h1></footer>
</section>

You should wind up with something boring like this:

Now we’ll add in the “data-role” attributes that tell jQuery Mobile what styles and actions to apply. We’ll use the following attributes:

  • data-role=”page” (for each page of the app)
  • data-role=”header” (for the styled header toolbar)
  • data-role=”content” (to contain the main page content)
  • data-role=”footer” (for the styled footer toolbar)

So now let’s add it into our code:

<section id="page1" data-role="page">
<header data-role="header"><h1>This is my first page!</h1></header>
  <div class="main" data-role="content">
   And here's my content!
  </div>
<footer data-role="footer"><h1>And here's my footer</h1></footer>
</section>

And you should end up with something like this: (much better!)

It’s that simple. Keep watching for more in-depth tutorials on working with jQuery Mobile.