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 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.
Let’s dig in
Let’s start by downloading all the components that make jQuery Mobile tick:
Download the following files:
- http://code.jquery.com/jquery-1.8.3.min.js
- http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.zip
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.
File Structure
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
The HTML file
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”:
View Source
Hello World
Let’s preview that
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.
Page Structure
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:
Welcome to my home screen
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:
Welcome to my home screen
Welcome to my second screen
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:
Welcome to my home screen
Second page
Welcome to my second screen
Make Another Page
Now it’s your turn, make a third screen and link to it from the first (home) screen.
Leave a Reply