Introduction to jQuery Mobile
Back in November, I sat in on a session by Scott Hanselman on creating a mobile site on ASP.NET using jQuery Mobile. While I was watching this session I could not stop thinking how easy is this, I can do this for the mobile version of the Microsoft Global MVP Summit mobile site. So like most of us, it took me a month to get to it.
A few days ago while on vacation and everyone was asleep, I started to play around with jQuery mobile and in about an hour I had a sample site created. Here’s how you can get started.
Getting started with jQuery Mobile
According the jQuery Mobile website, jQuery Mobile is…
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement and has a flexible, easily themeable design
To get started with jQuery Mobile you can head over to their Quick Start Guide. Here is the minimum HTML document that you need for jQuery Mobile.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The first this you will notice is the simple DOCTYPE.
1
<!DOCTYPE html>
Next, you will need to include a reference to the jQuery Mobile scripts and CSS files in the HEAD section of the document.
1
2
3
4
5
6
<link rel="stylesheet"
href="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="https://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
And then finally in your HTML Body, you need to create a “page”. You do this by creating a DIV and an assigning the role of the page to it.
1
2
3
<div id="#default" data-role="page">
...
</div>
The id is optional and can be used to have more than one page within a document. For more on the page structure, check out the Anatomy of a Page in the jQuery Mobile docs.
That’s all you need for the bare minimal jQuery Mobile page.
jQuery Mobile Page Parts
jQuery Mobile pages are made up of potentially 3 parts; the header, the content (body) and the footer. These parts are outlined by creating a div and assigning a role to it. The roles are data-role=”header”, data-role=”content”, and data-role=”footer”.
1
2
3
4
5
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Header Part
Is defined by the following markup.
1
<div data-role="header">...</div>
The header part of the document is where you place content that you want as the head or beginning part of the page. This is typically page titles and toolbars.
Content Part
Is defined by the following markup.
1
<div data-role="content">...</div>
The content part of the document is where you place the page content.
Footer Part
Is defined by the following markup.
1
<div data-role="footer">...</div>
The footer part of the document is where you place the footer content. This is typically navigation, copyright information, etc.
Hopefully, I armed you with enough information to get started with jQuery Mobile. In the next few posts, I will talk about how I converted the Microsoft Global MVP Summit mobile site to use jQuery Mobile.
Share on
Twitter Facebook LinkedIn RedditLike what you read?
Please consider sponsoring this blog.
