Skip to content

jQuery Mobile Tutorial: Basics

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:

[code lang=”html”]

jQuery Mobile Tutorial on


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:

[code lang=”html”]

jQuery Mobile Tutorial on

Some Title

Page Footer


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.

[code lang=”html”]


The content

View internal page called second

Page Footer


I’m the second content

Back to first

Page Footer


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.


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

[code lang=”html”]

jQuery Mobile Tutorial on

The title

The content

The Footer


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.

25 thoughts on “jQuery Mobile Tutorial: Basics”

  1. Pingback: Tweets that mention jQuery Mobile Tutorial: Basics --

  2. 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?

    1. 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.

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


  4. Pingback: Jquery Goes Mobile | Taj Virani

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

  6. 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.

  7. Pingback: Best Jquery Mobile TutorialDesign Freebies

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

Comments are closed.