on Basics Tutorials

jQuery Mobile Tutorial: Basics

25 comments
jquery-mobile
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

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.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



  • http://www.influxwebdesign.com Matt Zimmermann

    Another great, and just in time, article Zvonko. I am just about to start working on a mobile site. Thank you.

  • Pingback: Tweets that mention jQuery Mobile Tutorial: Basics -- Topsy.com

  • http://www.visualsuspect.nl visualsuspect

    Looks like a good read! Going to check it this evening.

  • Dominic

    looks interesting, If you use this technique with a snippet of mobile phone user agent detection like this; http://www.tutorialcadet.com/mobile-phone-detection-with-http-user-agent-in-php/

    You could autodetect the presence of a mobile browser.

  • T. Van Rooy

    not bad… but honestly this is right off the jquery mobile site. I hate to be pushy (seeming as you are publishing this on your own time for free and all) but would you write about slightly more useful topics like connecting up jquery mobile, mysql and php?

    Preferrably using a text box to search a mysql database, and dispaly the resulting dataset?

    • Zvonko

      Thanks for your comment. I am writing a tut for creating a small application using jQuery Mobile and then all this topics will be covered.

  • Name

    Can’t wait to see what the next tutorial entails

  • http://www.pixeldesire.com Andre

    Zvonko, I also look forward to your jquery mobile tuts dealing with a mysql end.

    Thank You!

  • DWL

    Thanks for this. Very easy to follow and I’m a total newb when it comes to mobile.

    Cheers!

  • http://peanutlabs.com th3archit3ct

    Wow, this exactly what I was looking for, the jQuery mobile site is pretty scarce on documentation. Thanks!

  • Elias Junior

    Amazing!!! this tutorial es very simple!! and really good!! thanks a lot !

  • Prix

    Nice start! So wheres the next tutorial???

    • http://codeforest.net Zvonko

      New tutorial for jQuery Mobile is coming soon. Stay tuned.

  • http://www.oxygenate.net Blerx

    Wow that was really straight forward thanx for a great tut m8

  • exdesignorama

    Where is the demo? I need the demo so I can check it out with my iphone :)

  • devendra

    really amazing, easy and simple waiting for next.

  • http://www.mobosurvey.com Tuan Bui

    Great article. If you want to see jquery mobile in action, check out http://www.mobosurvey.com we are using jquery mobile for our survey generator for mobile devices and it looks great.

  • Pingback: Jquery Goes Mobile | Taj Virani

  • Pingback: JS–różności + HTML5 « Wiadomości o technologiach IT

  • http://www.infyways.com/ Mark William

    Nice post. Its really very useful tips.
    Please show the demo.
    Thank you for sharing this.

  • http://www.inwebson.com Kenny

    Good article! I’m trying to develop a mobile apps and I think this will help me a lot. Thanks for sharing, waiting for another useful article.

  • Pingback: Best Jquery Mobile TutorialDesign Freebies

  • http://www.learncomputer.com Svetlana

    Hi, guys! Nice tutorial for the biginners. We have one on our blog too. Your readers might also like: http://www.learncomputer.com/jquery-mobile-beginner-tutorial/
    Thak you for your great job!

  • Pingback: 7+ Mobile Web Building Tutorials for Beginners | CODER-DESIGN

  • http://www.jhndesign.com JHN

    Great tutorial, very easy to follow . thanks