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.
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:
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.
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 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>
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>
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.
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?
Just to clarify, the footer nav is display on a vertical way and not horizontal.
Hmm…The full code is here: http://iviewsource.com/exercises/jqmlist/. If you have a link, I can take a look at it. You should make sure you’re using a div or nav tag with a data-role=”navbar” wrapping the list in the footer
Pingback: Tweet Parade (no.43 Oct 2012) | gonzoblog
Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.156) | Wordpress Webdesigner
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.
Oh Yeah…that’s a good point. Thanks for including that here.
Pingback: Weekly Design News N.156
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.
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.
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.
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.
Glad you figured it out.
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?
THe easiest way is to use Adobe PhoneGap Build. It will convert your jQuery Mobile code to native app code.
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!
You should check out PhoneGap Build instead of PhoneBap. It’s A LOT easier. You pretty much upload your files and WHAM! it builds the code for you.
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..
You can see the finished code on the link at the end of the article.
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!
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.
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
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.
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?
You can do a redirect with window.location = “http://www.google.com/”
There’s a website with some scripts for it. http://detectmobilebrowsers.com/
Could you please provide some tutorial on Ajax refresh calls i.e partial refresh on these mobile apps pages
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.
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
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
You should use the hash tag instead of the slash. So it would be image.html#image1
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.
Oh yeah, I totally forgot about that. Sometimes you have to use those when working with separate pages. Thanks for adding that.
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.
I’m not that familiar with how Dreamweaver treats jQuery items or jQuery mobile items.
Pingback: jQuery Mobile | Web Code
Very useful, Ray. Thank you.
I love the way that you built the app with one understandable chunk at a time. That really helps.
Thanks Jim