What is JQuery Mobile?
jQuery mobile is essentially a mobile app development platform that builds upon jQuery:
“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.”
–jQuery Mobile Website
A mobile Javascript Library, sounds like exactly what we are looking for!
Where did I start?
I have experience with jQuery so I guess one could say this was started two years ago. However the mobile framework is completely new to me. I would recommend basic jQuery tutorials in addition to javascript tutorials. But my jQuery Mobile adventure began at Google when I took a shot at searching “jQuery Mobile” I then continued to download jQuery Mobile 1.2.0 and jQuery 1.9.0.
Like most things you need walk before you run, so I started with a very basic hello world interface.
Step1: Setup the website
I always recommend the boilerplate folder setup:
css/style.css
js/jquery.js
js/jquerymobile.js
js/script.js
index.html
Style.css is not necesary however i always recommend it for custom styles.
Here is the basic index.html code with notes:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<!-- Importing all required sources -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquerymobile.js"></script>
</head>
<body>
<!-- The basic jQuery Mobile Setup is Header, Content, Footer there are defined as 'data-roles' attributes
the data-role attribute is used extensively with jQuery Mobile -->
<div data-role="header"> <h1>This is the Header!</h1> </div>
<div data-role="content"> <p>This is the content!</p> </div>
<div data-role="footer"> <h3>This is the footer!</h3> </div>
</body>
</html>
This should look like this:

This is the extremely basic level of a jQuery mobile app! From here you can do more from this point, jQuery is very well documented so i would recommend going to their doc page which can be found on their website. here are some other screenshots of stuff that I was working with:
Here is a reactive concept I am working with!

Here is a basic testing page:

I hope to be posting more about this, however it is still very new to me. I am open to comments or suggestions!

From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.