In the months since

Mobile Web application development tutorial

First pageThe 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.

We then need to load our jQuery, and jQuery Mobile JavaScript code at the end, since it needs the jQuery library to work.

Second pageWhat 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

Restaurant Picker

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

  • element. data-inset=”true” is here to style the list as an inset list (with rounded corners and padding around it).

    Third pageEach list element

  • that contains an link will be automatically converted in a link list item by jQuery Mobile. To add the image, we simply add an image inside our < a href> link, and jQuery Mobile will do the work for us: it will display it on the left part of the list. Pretty easy.

    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.

    Restaurant Picker : creating a JqueryMobile web app from scratch and styling it.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:

  • Source: www.noupe.com
    RELATED VIDEO
    mobile application development training web application
    mobile application development training web application ...
    Android Application Development Tutorial - 92 - WebView
    Android Application Development Tutorial - 92 - WebView ...
    Windows Mobile Application Development Tutorial using C#NET
    Windows Mobile Application Development Tutorial using C#NET
    RELATED FACTS
    Share this Post

    Related posts

    Choosing BI Solution: Tibco Spotfire or Tableau?

    Choosing BI Solution: Tibco Spotfire or Tableau?

    AUGUST 21, 2017

    Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

    Read More
    Open source Web application development

    Open source Web application development

    AUGUST 21, 2017

    WebSmart PHP is the fastest way for RPG, PHP and other programmers to develop IBM i and multi-platform PHP web applications…

    Read More