Beginner guide to a mobile app using the jQuery Mobile JavaScript Framework (with video)

A super simple beginner’s guide to the jQuery Mobile framework

jQuery Mobile is an excellent way to create web applications for mobile devices, but it suffers from a bit of a PR problem. When I first learned about the framework, I put it on my list of technologies I should investigate, but like a lot of people I figured that because it’s based on jQuery, that you’d have to be an expert with jQuery before you could use jQuery Mobile…nothing could be farther from the truth.

All you need to use the framework is some basic HTML knowledge. In addition, to that, because the framework is built on top of jQuery…you get all of the functionality of jQuery in a way that is easily accessible. In this short tutorial I’ll show you how easy it is to create a list based app with the framework in just a few minutes and hopefully encourage you to give it a try.

What is the jQuery Mobile Framework?

jQuery mobile is a framework for developing web applications for touch optimized devices. A framework gives you a structure or methodology for doing something. In this case, for developing web applications.

Although you can use HTML and JavaScript to develope mobile optimized sites, you’ll quickly run into some serious problems…mainly that different devices and browsers treat your code differently. So you have to write a bunch of JavaScript to overcome device orientation and other issues. You also have to create styles for different things like list views, dialogs, toolbars, etc . jQuery mobile does all of that for you. It creates a code base that handles differences between devices with support for a large range of devices

A Quick Example

So, let’s get started with a quick example. I’m going to build a quick app to show some photos. It’s going to be a list based app. I’ll start with some super basic starter code for a normal page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>ListApp</title>
    </head>
    <body>
    </body>
</html>

This is pretty standard HTML code. Let’s add a header section to our body.

<div id="header">
    <h1>My Photos</h1>
</div>

And of course, we’ll need a footer. I’m going to add a navigation with some dummy links to some other potential pages.

<footer>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Info</a></li>
        </ul>
    </nav>
</footer>

Now, we need some content. To keep things as short as possible for this article, I’m going to add two photos to the mix. Since this is a list based app, I’ll put the photos inside a list.

<article>
    <ul>
        <li>
            <a href="#">
            <h1>Miniature Doberman Pincher</h1>
            <img src="images/doggie_tn.jpg" alt="Min Pin" />
            <p>This is what happens when a
            friend brings a dog to the studio.</p>
            </a>
        </li>
        <li>
            <a href="#">
            <h1>Gummy Bears</h1>
            <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
            <p>Three different poster boards...mirror for reflection,
            black for background white for highlights</p>
            </a>
        </li>
    </ul>
</article>

We encased our list inside an article tag and inside each list item, we have a link, which will eventually take us to a large version of our image and then a headline, a thumbnail and a short description.

Before we add jQuery mobile our site looks like this

So far, this is just a regular HTML page. The first thing we have to do is to add the jQuery library. Since it is based on jQuery Mobile, we’ll need to add that library too, as well as some styles that the library needs. The easiest and recommended way to do this is to copy three lines of code from jQuery Mobile’s download page .

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

You can put this in between the <head> tags in your document (not to be confused with the <header> tags). These three lines tie in the CSS, the jQuery Mobile Library and the jQuery library. If you preview the page now, you’ll be able to see some slight differences in the look of the page. The background will be gray, the fonts will be different. Not too exciting, but it means the library is already working. Here comes the exciting part.

Formatting a list view

Modifying our list so that it gets mobile device functionality is super easy, modify your <ul> tag to read like this:

<ul data-role="listview">

Your page should look something like this: jQuery Mobile changes your list to look like a traditional mobile list view

Take a look at the photo above. Really impressive. From someone who has written the CSS necessary to make a list look like that, I can assure you, this library is going to save you a ton of time.

jQuery Mobile uses the data-role tag to assign roles to regular HTML elements on a page. The reason it can do this is because of a really cool feature in HTML5. You can add a data-whatever attribute to any tag and store information that you can use to style elements and create interactivity.

Making the list searchable

For an even more impressive example of what the library can do, modify your <ul> tag like this.

<ul data-role="listview"  data-filter="true">

This makes your list searchable. You should see a seach box appear on top of your list. Start typing the word gummy into the search box and you’ll see that the list only displays on item (them one with the text gummy bears in the title). jQuery mobile does all of that for you automatically.

Adding a data-filter=true attribute gives you a searchable list field.

Formatting Headers and Footers

Our page doesn’t look perfect yet, let’s add some of the other tags that tell jQuery Mobile to format things in a more mobile friendly fashion.

Content in jQuery mobile is normally withing in a data-role=content section. We can add that to our <article> tag.

<article data-role="content">

Let’s also fix up the header. We’ll use the data-role-header in the <header> tag.

<header data-role="header">

And logically the footer. Modify the <footer> tag like this.

<footer data-role="footer" data-position="fixed">

Not perfect yet, but a big improvement. Our header looks like a mobile device header, our search bar and list are nicely formatted. Notice that I’ve added the data-position=”fixed” attribute to the footer. That places the footer at the bottom on mobile devices. Our footer looks good, but the links could look better. Let’s make them look like buttons on a mobile device.

Modify the <nav> tag in the footer to read like this:

<nav data-role="navbar">

Our Application already looks great, but it could use some icons on the navivagion

Our application is looking great, however, we could really use some icons on the navbar links. jQuery mobile lets you easily add icons by adding a data-icon attribute to links. Modify your list items to read like this:

<li><a href="home" data-icon="home">Home</a></li>
<li><a href="Photos" data-icon="grid">Photos</a></li>
<li><a href="Info" data-icon="info">Info</a></li>

Adding icons is easily done with the data-icon attribute

The result is pretty stunning. With just a few attribute tags, we’ve added mobile functionality to a page that would have taken hours to write and style.

Multiple Pages

So far, we’ve built a single page app, if you want to create an app with multiple pages, you have to wrap each page with a tag and use the data-role=”page” and add an id so that we can link to that page.

Before the <header> tag add the following line of code.

<div data-role="page" id="photos">

And don’t forget to close it underneath the footer tag

</div><!-- Page Photos -->

I always add a comment because when working on a large jQuery Mobile project, you’ll be using a lot of <div> tags and it’s nice to know who the closing tags belong to. Now that we have a page, let’s add a page for each of our photos.

<div data-role="page" id="dog">
    <header data-role="header">
        <h1>Min Pin</h1>
        <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
    </header>
    <img src="images/doggie.jpg" class="fullscreen" alt="Min Pin" />
</div><!-- Page Dog -->

<div data-role="page" id="gummies">
    <header data-role="header">
        <h1>Gummy Bears</h1>
        <a href="#photos" data-icon="grid" data-iconpos="notext">Photos</a>
    </header>
    <img src="images/gummies.jpg" class="fullscreen" alt="Gummy Bears" />
</div><!-- Page Gummy Bears --> 

The code is pretty similar to the our photo list page with some important changes. There is not going to be a footer on these pages, since they will just display the photos. We added a header with a link back to the home page and you might notice a data-iconpos attribute on that link. You can control the position of the icons on buttons with this attribute or you can turn the buttons off altogether using notext as a value. The button on the header is linked to our photos page.

I’ve also added a class of fullscreen to my photos. This is not a jQuery mobile class, but something I’ve added myself. I want the photos to display full screen, so eventually I’ll add some CSS for that. First though, we need to link the items in our listview page to our new pages. Modify the list like this:

<li>
    <a href="#dog">
    <h1>Miniature Doberman Pincher</h1>
    <img src="images/doggie_tn.jpg" alt="Min Pin" />
    <p>This is what happens when a
    friend brings a dog to the studio.</p>
    </a>
</li>
<li>
    <a href="#gummies">
    <h1>Gummy Bears</h1>
    <img src="images/gummies_tn.jpg" alt="Gummy Bears" />
    <p>Three different poster boards...mirror for reflection,
    black for background white for highlights</p>
    </a>
</li>

Our app is almost done, now right before the closing </head> tag at the top of our document, let’s add the style to make sure our photos fit.

<style>
    img.fullscreen {
        max-height: 100%;
        max-width: 100%;
    }       
</style>

Our finished App lets us display our photos on mobile devices

One more thing

Like with any mobile project, you need to use the viewport tag to make sure your app shows up correctly on phones. Some devices pretend the page is 960 pixels wide, so you need to use this code somewhere between the <head></head> section of your document.

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

Our app is now ready. You can take a look at the finished product here.

40 thoughts on “Beginner guide to a mobile app using the jQuery Mobile JavaScript Framework (with video)

  1. Diego

    On my file the header text and the footer nav doesn’t display like yours. Did you add extra css not cover in the tutorial?

    Reply
  2. Pingback: Tweet Parade (no.43 Oct 2012) | gonzoblog

  3. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.156) | Wordpress Webdesigner

  4. Allen Tom (@atom)

    Thanks for the tutorial! I think you should mention that the reader will need to include the viewport meta tag in the head section of the page in order to get the example to render correctly on a mobile device. You have the viewport tag in your example source, but you didn’t mention it in the tutorial itself. The example does not render correctly (it’s way too wide) on iPhone Safari without the viewport tag.

    Reply
  5. Pingback: Weekly Design News N.156

  6. Eric Deagle

    Thanks for a great article. I have a total newbie question so please don’t laugh to hard. I have watched several videos on Lynda.com and other sources and I have found nothing on how to update the content for your app after you create it. Using this example if I wanted to add another photo or other information how would I do that? Would I have to repeat this process like in the video and then resubmit the app back to Itunes and google play for approval. Seems like it must be an easier way to update content.

    Reply
    1. Ray Villalobos Post author

      If you want it to be on the App store, you have to go through that process. If you’re just doing a mobile application, then you just update it like you would a web page. Just change your HTML and you’re done.

      Reply
  7. tamak

    awesome tutorial… quick question… the links in the footer dont work for your example (where you make the full demo available) nor on my step by step build of the example… they generate an “error loading page” message in yellow modal window in middle of page… I tried to make sure the ‘page’ name element matched the a href in the footer links but still not working… what am I missing here… how do I make sure those links in the footer go to specific pages I’ve defined… do I need to set those up as individual html pages (i.e. separately) as opposed to having multiple page (div’s) defined within the single html document.

    thanks for the tutorial… jquery and jquery mobile are amazing frameworks and do a tremendous amount of heavy lifting for the UX aspect.

    Reply
    1. tamak

      Nevermind… I realized that the # character had to be on the nav links… so instead of <a href=”info”… it had to be <a href=”#info”…

      Thanks again.

      Reply
  8. Woodsy

    very helpful blog thanks for someone like me thinking of dabbling in mobile apps development. Just one question please, how would you publish the example jquery mobile app to the various stores for iOS and Android, etc?

    Reply
      1. Woodsy

        Cheers Ray had come across PhoneGap since my post, looks like bit of a learning curve to use for novice like me but thanks for confirmation anyway!

        Reply
  9. Sat

    Hi dear friend, Thanks for your example, I am new in jquery mobile and I am happy to learn here , my question is the same like the footer link doesn’t working, it saying error, can you please write the full footer link working code. Thanks in advance..

    Reply
  10. Cari

    I have what I suspect to be a dumb question that’s prob obvious, but I’m going to ask anyway… I want to build a mobile website for the library I work at using jquery mobile. I’ll probably use some easy template. My question–a lot of the pages I want to use as main nav are going to need to be linked to external sites–our mobile-friendly event cal–our mobile-friendly ebook download site, etc. I can build all this now using any plethora of free mobile builders, but the main downfall is that when a user clicks on one of these external sites, they lose the main nav header. Can I use jquery mobile and have these external pages load WITHIN the jquery framework, like an iphone app–so I won’t lose the navigation menu at top? I know there’s a jquery ‘external’ tag, but when I tested that, it still took me away from the mobile site and to a new safari page.

    I want the user to stay within the ‘app’ for the best experience and the easiest use.

    Possible? No?

    Thanks!

    Reply
    1. Ray Villalobos Post author

      The easiest way to do it is with an iFrame, but it’s messy and tough to scale for responsive design. The other option is to have the content from another page be integrated into the app. I did this in my lynda course on jQuery Mobile Web Applications. It’s essentially reading a JSON file from WordPress and incorporating the content. It really depends on what content you want to bring in, but it’s definitely possible.

      Reply
      1. Cari

        thanks Ray–I actually have a lynda.com account, so I’ll check this out. I’m not a coder by any means, so I have no idea what you mean by JSON, but I’ll do some digging. This is an example of the content I want: https://sites.google.com/site/mclibmobile/ This google site works for now, but I”d much rather build something slicker.

        Only need these simple links–but the ‘find books and media’, ‘download ebooks’ , ‘my account’ and ‘calendar’ links go to external sites now–those are the only ones I would need to be ‘within’ the app–the others I can definitely build pages for. Thanks for your time :)

        Reply
        1. Ray Villalobos Post author

          Hey Cari,

          If you have lynda.com, you should check out my course jQuery Mobile Web Applications. It’s a more advanced version of this tutorial. Here’s a link to all of my courses. http://lynda.planetoftheweb.com. I also wrote an article on this website on JSON for Absolute Beginners.

          http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/

          It’s a technique I used in my jQuery mobile course to import wordpress pages. It might help with some sites, but they have to export the data.

          Reply
  11. Danny

    How would you go about actually uploading a complete mobile web app to a WordPress website so when a user goes to the website on their mobile device they would see the mobile app rather than the complete full site?

    Reply
    1. Ray Villalobos Post author

      I did a course on this on lynda.com called jQuery Mobile Web Applications. The chapter on Twitter feeds handles refreshing with jQuery AJAX calls. That whole chapter is being edited and there is a slight change in the code because of updates to the Twitter API. Just look in the FAQ tab for the code change until the update goes to edit.

      Reply
  12. Alister Ernest

    Ray – I am just trying to learn jQuery by looking at docs, available demos and following them. Your tutorial/demo has been excellent. I have a quick question though.

    In my project I have “Page1.html” file which contains the lists. And I have another file called “Images.html” where the code for displaying the Image lies. So in essence the “Image.html” file contains more 5 page divs with the “data-role = page” attribute.

    How should my href be to reference the images in Images.html from Page1.html

    Image.html

    I have tried the following href’s to no avail: 1. “Image.html/image1″ 2. “Image/image1.html” 3. “Image.html#image1″

    Any insights will be greatly appreciated and helpful.

    Thanks

    Reply
    1. Alister Ernest

      I had put a sample of my Image.html file, but looks like that HTML did not show up in the comment. Its like this. I hope this shows up.

      div data-role=”page” id=”image1″ header /header img src=”path/to/image1.jpg” End of div

      div data-role=”page” id=”image2″ header /header img src=”path/to/image2.jpg” End of div

      Reply
      1. Alister Ernest

        Hello Ray,

        Thanks for the reply. I kinda figured that out, but in addition to that I also had to add the attr data-ajax=”false” or rel=”external”. Either of them do the trick. Just wanted to post the solution here as well, so anyone else facing the same issue would have a solution. Thanks again.

        Reply
        1. planetoftheweb

          Oh yeah, I totally forgot about that. Sometimes you have to use those when working with separate pages. Thanks for adding that.

          Reply
  13. akear

    I just started using Jquery with Dreamweaver 6. I created an extra list for a page, but it won’t go to the new page I created. WHy are only 3 page choice offered in Dreamweaver for JQuery. I can’t limit a mobile page to just 3 pages.

    Reply
  14. francisco

    hi! im working on a projec using this example as template and start developing my own site. Im working on micorsoft visula studio 2010 ultimate, and doing “copy paste” from your web site and not even de JS or CSS are working – I have updated it to version 1.3.0 and i have problems reading the JS, so it just look asa basic html site. Any advise will be welcome

    Reply
  15. Pingback: jQuery Mobile | Web Code

  16. Ercole

    Hi Thanks for the great tutorial! very clear and helpful. If I use the last actual library Then the images in the artikel are note scaled.

    But if I use the old library as in this tutor The scaling is working, do you know the reason?

    Kind Regards Ercole

    Reply

Leave a Reply