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.”
Where did I start?
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:
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!