In this tutorial I will show you how to build a website with JQuery Mobile. In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site.
The Event Website
The website will advertise a fictional event, and it will consist of four distinct pages:
- Home
- Speakers
- Schedule
- Information
The site’s map would be something like this:
Let’s take a look at the wireframes for each page.
The Event’s Home Page
The Home page will have a toolbar, a banner and four buttons linking to different areas of the site.
The Speakers, Schedule and Information buttons are pretty self-explanatory. I will leave the implementation of the registration page as an exercise for you.
The Speakers Page
This page will host the list of speakers participating in the event. Each item of the list will display the speaker’s name, picture and short bio.
This page will also host a “Home” button linking back to the Home page.
The Schedule Page
The Schedule page will contain the list of event sessions. Each list item will display the session’s name, time, location, description and a picture of the speaker.
Along with a button linking to the Home page, the page’s toolbar will contain a set of buttons representing each of the event’s days. Pushing any of these buttons will display the sessions for the selected day.
The Information Page
The last page of the site is the Information page. This page will display a picture and a description of the venue, along with a list of hotels, their descriptions and rates.
How JQuery Mobile Pages Work
JQuery Mobile’s site explains in detail the anatomy of a JQuery Mobile page. It is recommended that you start your pages with a boilerplate template like this:
<!DOCTYPE html> <html> <head> <title>Page Title</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>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
The data-role=”page” attribute on the outer div element designates that div as a mobile page. Similarly, the “header”, “content” and “footer” data roles designate the header, content and footer areas of the page respectively.
To build your mobile sites using JQuery Mobile you can use one or multiple html files, each containing one or more mobile “pages”.
As you already know, for this tutorial I will take the multiple files approach, with each html file will hosting a single mobile page.
Creating the Home Page
Now that you have an idea of how things are going to look, let’s build the Home page.
Using the boilerplate page template, I first need to include the JQuery and JQuery Mobile resources at the top of the file like so:
<head>
<link rel="stylesheet" type="text/css" href="../jquery-mobile/jquery.mobile-1.0a2.css" />
<link rel="stylesheet" type="text/css" href="css/event.css" />
<script src="../jquery-mobile/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.0a2.js" type="text/javascript"></script>Notice that I also included event.css, which is the file where I will put the styles for the site.
In the body of the html file I will create a single mobile “page” containing the header, banner and buttons like so:
<div data-role="page">
<div data-role="header">
<h1>
Welcome!</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>
Mobile Dev 2011</h2>
</div>
<p>
The best mobile development conference is here!</p>
<p>
Learn how to build productivity, utility and immersive mobile applications.</p>
<p>
Use web-based and native platforms to create amazing applications for mobile devices.
</p>
<ul data-role="listview" data-inset="true">
<li><a href="./register.html">Register</a></li>
<li><a href="./speakers.html">Speakers</a></li>
<li><a href="./schedule.html">Schedule</a></li>
<li><a href="./information.html">Information</a></li>
</ul>
</div>
</div>This is how the page looks:
Following JQuery Mobile’s conventions, inside the body tag I identified the mobile “page” using a div element with the data-role=”page” attribute. The div with data role of “header” will be the header of the page. And adding the data role “listview” to the ul element will cause each li element containing a link to behave like a button:
Next Steps
We now have the Home page ready. In the next installment of this series I will build the Speakers page. Sounds good?
Want To Learn More?
Check out my How to Build a jQuery Mobile Application EBook. It teaches you how jQuery Mobile works by guiding you, step by step, through the process of building an application. It even explains how to keep application data synchronized with a server.
About Jorge
This is a very helpful tutorial. I found it well written and very understandable. Thanks for the post I will be visiting your site in the future.
sir, i want to develop a new application for mobiles can you help me please?.
@pragnakrishna
Can you explain the reason you need help?
This is very useful tutorial. Very easy to understand as well as implement. Thank you for your post.
When will be the next post.
can u help me how to make grid view in jquery mobile
can you please tell me how to get event.css file or can you plz send me complete zip package with all the files for ‘creating-a-website-using-jquery-mobile-part1′ and ‘creating-a-website-using-jquery-mobile-part2′
Thanks Jorge, its worth to time i spent.
Again thanks for gr8 wrok.
Hello, your tutorial is extremely useful.
Alas I’m making a website with media queries to detect and redisplay contents in desktop, tablet and mobile, what do you think is the best approach to marry media queries and jquery mobile together?
Would I need two sets contents (one for desktop and the other for mobile) on each page?
I’m just wondering if the data-role would affect any of the jquery that is already built on the site.
Hi Jorge,
Great stuff! The only thing I don’t understand: how to make a site that seperates a mobile version (using jquery mobile) and a regular theme?
An explanation would be very helpful… thanks in advance!
Koen, you can do that on the server side. You have can have a script that detects the browser making the request and redirects to the correct version of the site.
Very useful tutorial!
Thank you, I’m starting to make mobile version for my website, your tuto help me alot.
Hi,
I like this tutorial, in one of your replies you said server said, and in lot of other jQueryMobile tutorials, they put php or grails as server side with the application.
My question is :
when you finish an application using jquermobile with a server side technology, how will you deploy it in a device (phone or tablet), I am confused, do we have to have php installed in phones too. ?
thanks
Your help is appreciated.
Majid
Is there a reason why you have only one listing closing tag ?
Register
Speakers
Schedule
Information
Looks like the syntax highlighter I’m using removed the tags.
Thank you for the tutorial. Nice job! I am currently workin m.consiliumstaffing.com
Thank you very much for your tutorial!
I am a Chinese student.I am learning Jquery Mobile.Thank you very much.Can you send a book(txt) to my Email?
do you have demo？
I come from China and I want to learn jquery mobile .Can you email this case to me cause it’s really a great case
Fantastic tutorail!!! Thanks a lot.
Thanks for the excellent tutorial.how can i give orientation changes to grails application.
What application/tool did you used to make these wirefames?
Tks
Luiz
balsamiq.com
Hello sir,
Do you have any example with dynamic pages using Java & jquery for IPAD/IPHONES?
I came across your this tutorial more than a year after you posted it.
In the past two months i have been hunting the net for a quality step-by-step hands on tutorial on jquery mobile.
Had I discovered your tutorial much earlier than I could have saved myself a lot of pain.
But, it is never late to begin.
Wonderful tutorial.
Thanks for this installment.
I am heading to your next installment of the tutorial from here with a confident smile
You’re welcome!
can you please tell me how to get event.css file or can you plz send me complete zip package with all the files for ‘creating-a-website-using-jquery-mobile-part1′ and ‘creating-a-website-using-jquery-mobile-part2′
Nice and understandable tutorial ! Thanks a lot !!
Nice tutorial! Thank you. When are you going to post the part 2? I am looking for that.
I’m starting to learn jquery mobile and i must admit that this is excellent tutorial for beginners.
Thanks for this tutorial. I did enjoy reading through it. But will like to know which framework did you use in building. I tried your example without any framework and the css styling goes off on my blackberry mobile phone
Thanks a lot.
Hi…
Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly…
Thanks,.
I’m glad this help Jack. Thank you for your feedback.
Great tutorial! Quick question, lets say after you build the web app using jquery mobile, how do you go about actually linking it with your domain so when a user goes to your website on their mobile device it will go to the mobile version of the site rather than the full website?
There are may ways you can do this. One of the is to write a server script that detects the type of browser the user is hitting your site with. If it’s a mobile browser, you redirect to the mobile app.
Hi, I have some question. I’m wandering the difference between jquery mobile website and app. In your tutorial, I see that it’s two very different framework, The website is just like the usual website that contrains html, js, css ect. But the app is the same as sencha framework to some extent which is defficult to learn. So I want to know what should I use. Look froward to your apply.
An app requires more code, as you noticed, because it has features that go beyond those of a simple website. And, yes, it takes time to learn how to code an app. For pointers on which framework to use, read my Sencha Touch or jQuery Mobile? – Read This Before You Make a Decision article.
I sorry i didn’t say clearly, actually i means the website and application of jqeury mobile. I don’t know how they differ. And can you tell me the useful carousel of jquery mobile?Thanks in advance.
jQuery: 102KB
jQuery Mobile CSS: 93KB
jQuery Mobile JS: 142KB
Total: 337KB
I can’t get my head around why we need JavaScript frameworks to create mobile sites that could be easily created using standard HTML5, CSS3 and a bit of JS on top for extras.
cool cool cool
Its too much helping