By Gwinyai Nyatsoka
What Is JQuery Mobile?
JQuery Mobile is a cross platform mobile framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework that is not only robust, but maintainable and organized. In other words, JQuery is your usual client side development languages put together into re-usable elements that can make a mobile compatible website.
At the end of this tutorial we will end up with the following mobile web app.
Benefits of Using JQuery Mobile
The real benefit of JQuery Mobile comes in when you have a separate subdomain to offer a mobile website. You’ve seen this with Facebook. When you query m.facebook.com Facebook gives you a completely different layout that fits a mobile screen. In the backend, a server user agent string detects whether you are using a mobile and redirects you here automatically if you are using a mobile to try and access Facebook. But you can also go here manually from a desktop, Facebook has no problems with that.
Another beauty of JQuery Mobile is that you can take what you have made with it and convert it into a iOS and Android app using Phonegap. Apps made this way are called Hybrid apps which are distinct from Native apps where you use the frameworks created by Apple to make iOS apps and Android to make Android apps. You might choose this way to avoid the difficulty of going through a learning curve and complexity. For iOS apps you would need to learn XCode with Swift or Objective C programming. For Android apps, you would need to learn Java with Android Studio to make Android apps. However, the downside is that you lose the native feel with Hybrid apps and might suffer performance issues depending on how data intensive your app is.
Other Alternatives To JQuery Mobile
Before I begin, I must make the disclaimer that of course there are other solutions out there. Ratchet is a recent emerging alternative to JQuery Mobile which affords a more native feel to Android and iOS mobile users. Responsive web design where the CSS3 media queries are used to detect screen size and change a web page’s layout is another. This tutorial is not about which technology is better than the other but merely an article about how to use JQuery Mobile to make mobile websites.
Getting Started On Our JQuery Mobile Web App
Create a folder on your desktop and name it MobileApp. Inside this folder, create three subfolders names CSS, Scripts and images. You should have this.
Visit the JQuery Mobile website using the URL http://jquerymobile.com/download/ and download the latest stable release ZIP folder. Extract the ZIP folder and in it you should find a jquery.mobile-1.4.5.min.js and jquery.mobile-1.4.5.min.css files (at the time of writing, JQuery Mobile version 1.4.5 was available but yours might be different). Copy these files. Copy jquery.mobile-1.4.5.min.js into your Scripts folder and rename it jquery.mobile.js. Copy jquery.mobile-1.4.5.min.css into your CSS folder and rename it jquery.mobile.css. Now visit the JQuery website using the URL http://jquery.com/download/ and download the uncompressed version of JQuery 2x. Copy this file into your Scripts folder and rename it jquery.js. The images you need can be downloaded from http://codesagetechnology.com/jquerytutorialimages. Copy these images and paste them in your Images folder.
Now here is the code that makes all the magic. Copy and paste this into an index.html file and drop this in your MobileApp folder. We’ll be explaining what it all means shortly but if you open index.html in your browser you should get the same web app we are trying to make.
<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1″ /><link rel=”stylesheet” href=”CSS/jquery.mobile.css” /><script src=”Scripts/jquery.js“></script><script src=”Scripts/jquery.js“></script></head><body><div data-role=”page” data-add-back-btn=”true” id=”page1″ data-theme=”a”><div data-role=”header” data-position=”fixed” style=”background-color:#993333″><h1><img src=”images/headlogo.png” /></h1></div><div data-role=”navbar”><ul>
images/pic1.png” /><h2>Latest Mens Wear
What’s new in men’s department
- <img src=”
images/pic2.png” /><h2>Latest Womens Wear
New women’s clothing
- <img src=”
images/pic3.png” /><h2>Summer Cool Wear</h2><p>New prime Adidas Sports wear</p></li><li><img src=”images/pic4.png” /><h2>Night Wear</h2><p>Excellent night wear apparel</p></li></ul> </div><div data-role=”footer”><h4>Mobile App</h4></div></div></body></html>
Setting Up the Head Section
Let’s start with the first section of code.
<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1″ /><link rel=”stylesheet” href=”CSS/jquery.mobile.css” /><script src=”Scripts/jquery.js“></script><script src=”Scripts/jquery.js“></script></head>
Creating the Header
<body><div data-role=”page” data-add-back-btn=”true” id=”page1″ data-theme=”a”><div data-role=”header” data-position=”fixed” style=”background-color:#993333″><h1><img src=”images/headlogo.png” /></h1></div>
The data-add-back-btn again has specific meaning to JQuery Mobile. This allows you to add a back button so that if you navigate away from this page, JQuery will place a convenient back button to come back. We have set this to true. The data-theme attribute allows you to use predefined JQuery Mobile layouts that ship with JQuery Mobile. We are using theme “a” here but there are others like theme “b” and “c”.
Now we want to put the ABC logo in. We start by adding the attribute data-role=”header” which will create a JQuery Mobile header. We have made the header fixed with data-position=”fixed” so that as we scroll down the page the logo follows along. We have changed the background colour of the header to :#993333 a bright pink colour. Now we add the logo as an image in between the div tag with the data-role=”header” attribute.
Creating the Navigation Bar
<div data-role=”navbar”><ul><li><a href=”#” data-icon=”home” >Home</a></li><li><a href=”#” data-icon=”search”>About</a></li><li><a href=”#” data-icon=”info”>Contact</a></li></ul></div>
We start by creating a data-role=”navbar” attribute which makes our unordered list into a neat navigation bar. The data-icon attribute will create JQuery Mobile icons for you with the navigation bar. For example, the data-icon=”home” will create a familiar house icon. We have not defined any pages that you can actually navigate to if you click any of the options in the navigation bar. But all you need to do is replace the # sign with a new page if you would like, for example, contacts.html.
Creating the Listview
We created a div tag with the attribute data-role=”content”. This is what tells JQuery Mobile you have started putting the main content of your web app. It usually follows the div tag with the data-role=”header” attribute.
A listview creates another neat way to navigate around your mobile web app. The attribute data-role=”listview” will make an unordered list into a listview. How you arrange the elements under the listview will affect how it will appear. For example, in this listview, the sibling elements are simply an unordered list.
<div data-role=”content” style=”background-color:#cd5c5c”><ul data-role=”listview” data-inset=”true”><li><a href=”#”>Spring Summer Catalogue</a></li><li><a href=”#”>Fashion Book</a></li><li><a href=”#”>My Account</a></li>
However the listview that directly follows it has an img, h2, and p tags defined in each li element. This creates a different listview which looks a lot like a product catalog.
New women’s clothing
- <img src=”
We define a data-inset=”true” attribute because this will neatly pack the listview with slightly rounded borders.
Creating the Footer
Now for the last part, the footer.
<div data-role=”footer”><h4>Mobile App</h4></div></div></body></html>
The footer is simple defined using the data-role=”footer” attribute.
Gwinyai Nyatsoka is a programmer, web developer and the founder of codesage. you may contact him directly for any more information.