Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery Mobile - Understanding the page structure

We will see here how to set up a page on the jQuery Mobile framework. It will be explained what is necessary in order to obtain the adequate layout and the functioning to the mobile devices browsers with the use of the resources of this framework.

Introduction to jQuery Mobile

On this introductory article about jQuery Mobile, we'll get to know a little bit about the structure of a page on this framework, understanding how should be organized the HTML code in order to use the available resources.

Next, we'll see some very important matters that must be clear to the developers that intend to use the jQuery Mobile.

Using HTML5

The framework jQueryMobile makes intense use of some HTML5 resources, mainly of the so called "cost data attributes". Throughout this article, we'll see that the attribute "data-role" is largely used on all the page and, advancing on the framework, we'll also see that there are many others "data attributes" in use.

As have been said, these are HTML5 resources and because of that the pages that use the jQuery Mobile should initiate their HTML code with the tag DOCTYPE, in order to the browser to recognize the HTML version to be used. Some older browsers will simply discard that tag, as well as the customized attributes.

Necessary references

It's easy to realize that the pages built on this framework have a very pleasant design, which suggests that there is a well structured sheet of styles behind such beauty. In fact there is, and the reference to it is fundamental to the complete functioning of the interface. On Listing 1, it is possible to see how to use this sheet of styles.

As one may imagine, the framework is not called JQuery Mobile by any reason, the jQuery library along with thye CSS file previously cited are the base for it's functioning. Thus, it is indispensable that there is as well the reference to jQuery (.js file) in the head of the page.

To finish, it must be referenced a file of script within the framework itself. Folllowing, we'll see the tags that must be inserted in the HEADER of the page.

Listing 1: Necessary references

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

The viewpoint meta tag

It's necessary to insert a meta tag named "viewpoint" in the head in order to the mobile divices can adequate the page to the browser's dimensions. The Listing 2 shows the format of this tag.

Listing 2: The meta viewpoint tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Page's structure

A page developed on the jQuery Mobile pattern must follow a series of rules in order to its functioning to be guaranteed. Every content visible must be inside a container with the data-role attribute defined as "page", usually it's used a div.

Within the div page, the "standard" layout of the page is formed by a header, a body and footer, which are div’s which data-role attribute carry the value "header", "body" and "footer", respectively.

The Listing 3 shows how the content of the body of a page with a standard layout, the most commonly used.

Listing 3: Page structure

<body>
    <div data-role="page">
        <div data-role="header">
            Título
        </div>
 
        <div data-role="content">
            conteúdo
        </div>
 
        <div data-role="footer">
            Rodapé
        </div>
    </div>
</body>

Now that we know the necessary basics in order to create a page following the patterns of the framework, let's gather all this information and save in a HTML file, so it'll be possible to visualize the result. The Listing 4 below exhibits the entire content of the page that'll be illustred after, at the Figure 1. Notice that it was added a meta tag with the charset of the page so we can use accents and special characters.

Listing 4: A complete page

<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Mobile - MrBool.com Tutorial </title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
 
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Title</h1>
        </div>
 
        <div data-role="content">
            <h3>Page body</h3>
        </div>
 
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

The result should be similar to the Figure 1.

Basic structure of a page

Figure 1: Basic structure of a page

Multiple pages in just one file

On jQuery Mobile it is possible to develop more than one page at the same HTML file. To do so, it's only create many div’s with data-rola="page" and give a differnt id's to each one of them, of course. To open a second page, it's only necessary to use a link, as for a local object, it means, using the symbol #(sharp) then the div's name. Next, on Listing 5, we have one example of two pages. After, the result is presented at the Figure 2.

Listing 5: Multiple pages in just one file

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile - MrBool.com Tutorial</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
 
<body>
    <div data-role="page" id="pag1">
        <div data-role="header">
            <h1>Title 1</h1>
        </div>
 
        <div data-role="content">
            <h3>This is the page 1</h3>
            <a href="#pag2">Page 2...</a>
        </div>
 
        <div data-role="footer">
            <h1>Footer 1</h1>
        </div>
    </div>
 
    <div data-role="page" id="pag2">
        <div data-role="header">
            <h1>Title 2</h1>
        </div>
 
        <div data-role="content">
            <h3>This is the page 2</h3>
            <a href="#pag1">... Page 1</a>
        </div>
 
        <div data-role="footer">
            <h1>Footer 2</h1>
        </div>
    </div>   
</body>
</html> 

We can see the two pages on Figure 2.

Multiple page structure

Figure 2: Multiple page structure

Conclusion

As we saw, structuring the page to use it on the jQuery Mobile framework is very simple, easy to understand and learn.

The pattern of the three div’s (header, body and footer) is just a suggestion and not necessarily need to be followed, however, it is certain that it grants a very adequate layout to the pages of web mobile applications.

So, we finish this article which objective was present and explain how to structure a page with the framework jQuery Mobile. I hope you understand and if you have any question, please let me know.

See you in the next publication.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login