on Basics Tutorials

jQuery Mobile Tutorial: Basics

26 comments
jquery-mobile

As smart mobile phones are all over the place, the need for mobile web pages rises. Building a mobile web page is different in many ways then building a “normal” web page.

To help us, smart people have developed a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Yes, it’s jQuery Mobile.

So, let me show how easy it is to use it. When you start developing with jQuery Mobile, first thing is to build a boilerplate template and see if everything is working as expected.

So open up your favourite editor and enter this code in:

<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Mobile Tutorial on Codeforest.net</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>The title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>The content</p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>The Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

</body>
</html>

Now save this page as index.php and open it up in the browser. OMG, it works. As you can see, we called jQuery and jQuery Mobile from Google and loaded jQuery Mobile CSS.

If you look closely, you will some strange attributes like data-role. It is exactly these attributes that are telling jQuery Mobile what this element is, how to look like and how to behave.

So, let us do something fancy now. There are two type of linking inside jQuery Mobile, External and Internal. Let me show you the magic:

External linking

By default, when you click on a link that points to an external page (ex. products.html), the framework will parse the link’s href to formulate an Ajax request (Hijax) and displays the loading spinner.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

If the Ajax request fails, the framework will display a small error message overlay that disappears after a brief time so this doesn’t break the navigation flow.

Open a new file and paste this in:

<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Mobile Tutorial on Codeforest.net</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Some Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>The content</p>        
        <p><a href="index.php">Click me to show the first page!</a></p>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer-->
</div><!-- /page -->
</body>
</html>

Save this file and load it in the browser. If you click on the link, you will see Loading and the new page is loaded. Also, there is a Back button rendered on top in header.

If something is wrong (like you misspelled index.php and wrote ondex.php), you will get an error message. Nice.

Internal linking

A single HTML document can contain multiple pages that are loaded together by stacking multiple divs with a data-role of “page”. Each page block needs a unique ID (id=”first”) that will be used to link internally between pages (href=”#first”). When a link is clicked, the framework will look for an internal page with the ID and transition it into view.

<!-- Start of first page -->
<div data-role="page" id="first">

    <div data-role="header">
        <h1>First</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>The content</p>        
        <p>View internal page called <a href="#second">second</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="second">

    <div data-role="header">
        <h1>Second</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>I'm the second content</p>        
        <p><a href="#first">Back to first</a></p>    
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Above is only code inside the body tags.

It’s important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel=”external” to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.

Themes

You can easily use themes anything in jQuery Mobile with data-theme attribute. Try something like this:

<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Mobile Tutorial on Codeforest.net</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body> 

<div data-role="page">

    <div data-role="header" data-theme="b">
        <h1>The title</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="b">
        <p>The content</p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b">
        <h4>The Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

</body>
</html>

Try it in your browser and you should have a nice bluish theme. You can try other letters like e or a.

That’s it for the basics. Next time we will start building our sample web page in jQuery Mobile from scratch. I hope you like this amazing piece of software and realize how easy it is to get started.

Related posts:

To get even more excellent content, you can follow me on Twitter.

26 Responses to “jQuery Mobile Tutorial: Basics”

Trackbacks/Pingbacks