\nA 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.<\/p>\n
Let’s dig in<\/h3>\n
Let’s start by downloading all the components that make jQuery Mobile tick:
\nDownload the following files:<\/p>\n
- \n
- http:\/\/code.jquery.com\/jquery-1.8.3.min.js<\/a><\/li>\n
- http:\/\/code.jquery.com\/mobile\/1.2.0\/jquery.mobile-1.2.0.zip<\/a><\/li>\n<\/ul>\n
Why are we not using the latest\/greatest version of jQuery or jQuery Mobile, you ask? Well, as a new javascript framework it’s is constantly evolving and I’ve supplied us we links to versions that work well together.<\/p>\n
File Structure<\/h3>\n
Next we’ll set up a standard file structure for our project. The final file structure can become your starting template for various projects. Here is the hierarchic structure that I’d like you to set up. Please note that there are no uppercase or special characters including spaces<\/em><\/strong><\/p>\n
![\"file-structure\"](\"http:\/\/courses.haigarmen.com\/desn412\/files\/2013\/02\/file-structure.png\")
<\/p>\nThe HTML file<\/h3>\n
The HTML file brings all the elements together and lives on the root level of the project. Here’s what the basic HTML looks like, it should be named “index.html”:<\/p>\n
\r\n\r\n\r\n\r\n\t\r\n\t
View Source<\/title>\r\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\" \/>\r\n\r\n\t<link rel=\"stylesheet\" href=\"css\/jquery.mobile-1.2.0.min.css\" \/>\r\n\t<script src=\"js\/jquery-1.8.3.min.js\"><\/script>\r\n\t<script src=\"js\/jquery.mobile.js\"><\/script>\r\n\r\n\t<script src=\"js\/myscript.js\"><\/script>\r\n\t<link rel=\"stylesheet\" href=\"css\/mystyles.css\" \/>\r\n<\/head>\r\n\t<body>\r\n\tHello World\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n<h3>Let’s preview that<\/h3>\n<p>Open the index.html file in a webkit browser like Safari or Chrome (in this class we’ll use Chrome more for it Developer Toolkit). Make sure all of your dependencies are loading with your index.html file. You can double check this by opening the Developer Tool (under the View\/Developer\/Developer Tools menu in Chrome). Then click on the Network tab to see if every file loaded properly. If something didn’t load properly it shows as an error in red.<\/p>\n<h2>Page Structure <\/h2>\n<p>jQuery Mobile is easy but requires a shift in thinking from the traditional HTML way of creating multiple pages for websites. With jQuery Mobile all of your pages can exist within the same HTML file in separate divs. Here’s what I mean, replace “hello world” with the following code:<\/p>\n<pre lang=\"HTML\">\r\n\t<div id=\"home\" data-role=\"page\">\r\n\t\tWelcome to my home screen\r\n\t<\/div>\r\n<\/pre>\n<p>jQMobile uses the div attribute ‘data-role’ to specify a div being a page container. The id attribute is a unique name that you assign the div and will be used to link to the page from other pages. Let’s make a second page:<\/p>\n<pre lang=\"HTML\">\r\n\t<div id=\"home\" data-role=\"page\">\r\n\t\tWelcome to my home screen\r\n\t<\/div>\r\n\t<div id=\"second\" data-role=\"page\">\r\n\t\tWelcome to my second screen\r\n\t<\/div>\r\n<\/pre>\n<p>When we preview our index.html file in the browser we can not see the second page. The reason for this is jQmobile makes the second page invisible and will only show that page once we click on a link to that page. Now let’s create that link:<\/p>\n<pre lang=\"HTML\">\r\n\t<div id=\"home\" data-role=\"page\">\r\n\t\tWelcome to my home screen\r\n<a href=\"#second\">Second page<\/a>\r\n\t<\/div>\r\n\t<div id=\"second\" data-role=\"page\">\r\n\t\tWelcome to my second screen\r\n\t<\/div>\r\n<\/pre>\n<h3>Make Another Page<\/h3>\n<p>Now it’s your turn, make a third screen and link to it from the first (home) screen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this course we’ll be using jQuery Mobile extensively as it is a widely used open source resource for creating mobile interfaces and builds on our existing knowledge of standard web technology (HTML, CSS and Javascript). What is it? jQuery Mobile is a touch-optimized web framework for smartphones & tablets. A unified, HTML5-based user interface […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-articles","category-tutorials"],"_links":{"self":[{"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":13,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/posts\/51\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.haigarmen.com\/desn412\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - http:\/\/code.jquery.com\/mobile\/1.2.0\/jquery.mobile-1.2.0.zip<\/a><\/li>\n<\/ul>\n