jQuery Mobile: Part 1 – Making your first mobile page

Happy days are coming soon as jQuery Mobile 1.0 is already in Beta 2 phase which is going to enter Beta 3 in, probably, next month and then to Release Candidates (RC). However, the current state of jQuery Mobile is very well qualified for playing. So, I wish to write some beginner level blog posts as I discover it. If you find any mistake, error and/or you have any suggestion, please feel free to notify me.

Today we will see how to create first page with jQuery Mobile 1.0 Beta 2. We will see other things in near future, may be :P.

What is jQuery Mobile?

Isn’t that very stupid question as, I guess, you already know that before coming here? Who does not know that it is a ‘write less, do more’ web framework built on top of jQuery & jQuery UI for developing mobile applications with fun? It is optimized for touch screen based smart phones including Android, iPhone, Windows Phone. However, lets see what wikipedia says about it?

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablets, made necessary by the growing-but-heterogenous tablet and smartphone market.

What you need?

As it is a mobile application framework, you will need a unsmart phone with supported platforms/browsers. However, you can test it on generic desktop web browsers too. I’m testing it using iPhone Simulator :).

Let’s create a page

jQuery Mobile pages are easy to create. You can consider it standard web page(s) with special markup. However, it is possible to create more than one mobile (virtual) pages in the same webpage.

1. Begin
Create a html page, may be index.html, and open it in your favorite editor

2. Doctype
jQuery Mobile pages are to be created with HTML5 markup to fully utilize the library’s features. So, at first, we will declare the HTML5 doctype.

<!DOCTYPE html>

See? HTML5 doctype declaration is easiest than ever.
3. Head Block
Then in the famous head block, we will put some important codes that will highly affect our mobile page. For example, viewport meta tag.

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

Viewport meta tag is very important as it directs the browser about page width and dimension. Unless you use it, browsers will set width something that is not comfortable for your users as it may be very wide and zoomed out. ‘width=device-width’ in the above meta tag tells the browser to set the page’s width equals to width of device that is being used. ‘initial-scale’ sets the zoom level of the page on load, which should be 1. You can set higher value if you want to zoom-in the page.

4. Load the jQuery Mobile libraries
In the head, we will load the jQuery Mobile library files. We will use the CDN enabled links for ease and better performance.

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

5. Creating page block
Page block will be started in <body> tag. Pages are actually different <div> blocks with special attribute and value. A body tag can hold multiple mobile pages/views too. Lets create our first page:

<div data-role="page">
</div>

Hey, we’ve declared the scope of our first page. Congrats! But, lets play with it a bit more.

<div data-role="page">
    <div data-role="header">
    </div>
    <div data-role="content">
    </div>
    <div data-role="footer">
    </div>
</div>

We’ve created the placeholders for header, content and footer.

6. More in header
Let’s extend the header section (identified by <div data-role=”header”>) now:

<div data-role="header">
    <a href="index.html" data-icon="home">Home</a>
    <h1>Welcome to our first mobile page</h1>
    <a data-rel="back" data-icon="back">Go back</a>
</div>

Now the page will look like the following screenshot.

Doesn’t it look cool? Yes, it does :).

In addition to header and anchor tags, we’ve introduced two important things here. They are data-icon and data-rel attributes. The heading tags (h1-h6) in the ‘header’ section becomes the title for that page.

Before the page title, we’ve added an anchor tag which links to site’s homepage. The attribute ‘data-icon’ with value ‘home’ tell jQuery mobile framework to show home icon for this link. In the same way, we’ve instructed to use back icon for the anchor tag after the page title. The other new attribute data-rel=”back” tells the framework to mimic browser’s back button to this link. That means, whenever you click this button, it will bring you to previous page. May be, there are not much use for this button on homepage but I just wanted to show that I learned it ;).

7. Putting the content

We can put our own HTML contents here.

<div data-role="content">
    <p>The html markup can go here</p>
</div>

We will not go detail about these in this post. Next post, may be.

8. Page Footer

<div data-role="footer">
    <p>Footer Content</p>
</div>

So, here is the final output

Piling them altogether:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <a href="index.html" data-icon="home">Home</a>

        <h6>Welcome to our first mobile page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <p>The html markup can go here</p>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>

    </div>
</div>
</body>
</html>

In next post, I will try to show more about page content and navigation between pages. Till then good luck!

  • Sarim Khan

    Wow, The Look is super coool 😀

  • helpful indeed to jump quick into jQuery mobile 🙂

    > “jQuery Mobile pages are to be created with HTML5 markup to fully utilize the library’s features. ” <
    does this above text comply with "To make this broad support possible, all pages in jQuery Mobile are built on a foundation of clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. " (text from jQuery mobile docs regarding HTML issue) ?

  • The HungryCoder

    You will need HTML5 to “fully utilize” library features!

    I believe by “any web-enabled device” they wanted to mean the mobile/handheld devices as those are the targets for this library. All mobile browsers are going to support HTML5 (more or less).

  • As we are using HTML5 here, can’t we use the , , or tag instead of ?

  • The HungryCoder

    Hi sumon,
    Sorry, I did not understand what you wanted to mean. can you explain?

    thanks

  • Sorry. The comment got filtered. Can’t we use the header, content or footer tag instead of div?

  • The HungryCoder

    Hi,
    yes you can. here is sample page for you

    <article data-role="page" id="page1">
        <header data-role="header">
            <h6>Welcome...</h6>
        </header>
        <content data-role="content">
            <p>This page is html5 tags: article, header, footer</p>
            <a href="#page2">Go to Page 2</a>
        </content>
        <footer data-role="footer">
            <h2>Footer Content</h2>
    
        </footer>
    </article>
    

    remember, these will not work unless you maintain the data-role attribute with page as value.

  • Thanks. It’s always easy to understand with example 🙂

  • The HungryCoder

    welcome. it’s just an example to show it’s possible but not the recommended usage of html5 tags!

  • Sonia

    Hi,

    Can you show an example of creating Lists?

    Thanks

  • The HungryCoder

    sure, i guess i should write the next parts of the series!

  • Sonia

    when would be that?

  • anil

    can you tell me where to develop mobile pages using Html5 and jquery?
    tell me how to develop this mobile pages?
    which tools I am using?
    tell me the sources to develop mobile pages using html5&jquery

  • Zelal

    Great Starting! Thanks.