Mobile Web application development tutorial
The first thing to notice is the “new” HTML5 doctype. jQuery Mobile makes a heavy use of the data- HTML5 attribute to add some elements in the DOM to style the page, so we will need an HTML5 doctype to make it all work nicely.
The second thing to notice is the meta name=viewport tag. We will use this meta tag to gain better control of our viewport. Without this tag, the browser will squeeze our layout in the whole page, and it will look ugly and very tiny. With width=device-width we will use our device width, making the app fit the whole size of the device without being squeezed. The initial-scale property controls the zoom level when the page is first loaded and we will set it to 1, meaning no zoom in or out when page is loaded.
Then we will call our CSS files. In older jQuery Mobile versions the CSS was in one file, but in the newer version they made a distinction between the structure and the actual design (colors, gradients etc) which makes it easier to create custom styles.
What You’d Like to Eat: First Page
Now let’s take a look at the HTML code of our first page, in this exercise we will call this page index.HTML
What would you'd like to eat?
jQuery Mobile makes the distinction between HTML documents and pages. A jQuery Mobile app can be composed of one HTML document with multiple pages in it, using the data-role=“page” attribute each page is linked using anchors; or of many documents, each one having its own data-role=”page” linked using “normal” links. In our case, we will go for creating one HTML document per page.
So first we will open our body, and create our page using
We will then open a content division, in which we put the branding of the app, and our first title followed by the list of different plates.
To create a jQuery Mobile list, we will put the data-role=”listview” attribute on our
Each list element
Here is what our first page looks like:
In Which Town Do You Want To Eat: Second Page
We will name the second page choose_town.HTML . Here is the HTML code, explanation of the tricky parts follows. Note that the header won’t change.
In which town do you want to eat?
We changed the id, so that jQuery Mobile can understand that this is another page. Notice that we used the data-add-back-btn=”true” on the page div, this will enable the Ajax back navigation and automatically add a back button to our title bar.
To create our title bar, we will create a div element, with the data-role=”header”.
To add a filter to our list, we will simply put data-filter=”true” on the ul element defining the list. Note that this is a filter that will filter the items of the list, and is not a search bar.
The last trick will be creating the little bubbles on the right of list elements, and we will do that by creating a span with the class and the numbers in it. And here is how the second page will look:
Choose a Restaurant: Third Page
We will name this page choose_restaurant.HTML and below is what the HTML code will look like.
Please choose a restaurant.
This page is pretty similar to the first one, except for the title bar and the notation of the customer. We already saw how to create a title bar in previous section. For the customer rating, we add a p element with two classes: .classement is mutual to all the elements and will enable us to style this element with little stars, and then we use the class .one.two.three and .four to make the distinction between how many stars the customers gave to the restaurant. We will later in the article see how to style this in a nice way, but for the moment, we’ll leave it plain text.
Here is our third page: