jQuery Mobile

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!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s