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.”
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.